1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
 
2
 
 
 
 
2
 
2
 
2
2
2
 
 
 
 
1
 
 
 
 
 
 
2
 
 
 
2
 
 
 
2
 
2
 
 
 
 
 
 
 
1
2
 
 
 
 
 
2
 
 
2
 
 
2
2
 
1
 
 
 
2
 
 
1
1
1
 
1
1
 
 
1
1
 
1
 
 
1
 
2
 
 
 
 
 
1
 
1
 
1
 
 
 
 
1
2
2
3
3
3
3
1
 
 
3
3
 
 
 
 
3
 
 
 
1
3
1
 
 
 
1
1
 
 
 
 
 
 
 
1
 
1
1
1
 
1
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
1
 
 
 
 
 
 
 
 
 
 
 
1
 
 
6
6
 
1
 
2
 
1
 
2
 
 
 
 
1
1
 
1
 
 
 
 
1
 
 
 
 
 
 
1
 
 
1
1
 
 
1
1
 
1
1
1
1
1
1
1
 
1
1
 
1
 
 
 
 
/*
example.js
 
quickstart example
 
instruction
    1. save this script as example.js
    2. run the shell command:
        $ npm install npmtest-grommet && PORT=8081 node example.js
    3. play with the browser-demo on http://127.0.0.1:8081
*/
 
 
 
/* istanbul instrument in package npmtest_grommet */
/*jslint
    bitwise: true,
    browser: true,
    maxerr: 8,
    maxlen: 96,
    node: true,
    nomen: true,
    regexp: true,
    stupid: true
*/
(function () {
    'use strict';
    var local;
 
 
 
    // run shared js-env code - init-before
    (function () {
        // init local
        local = {};
        // init modeJs
        local.modeJs = (function () {
            try {
                return typeof navigator.userAgent === 'string' &&
                    typeof document.querySelector('body') === 'object' &&
                    typeof XMLHttpRequest.prototype.open === 'function' &&
                    'browser';
            } catch (errorCaughtBrowser) {
                return module.exports &&
                    typeof process.versions.node === 'string' &&
                    typeof require('http').createServer === 'function' &&
                    'node';
            }
        }());
        // init global
        local.global = local.modeJs === 'browser'
            ? window
            : global;
        // init utility2_rollup
        local = local.global.utility2_rollup || (local.modeJs === 'browser'
            ? local.global.utility2_npmtest_grommet
            : global.utility2_moduleExports);
        // export local
        local.global.local = local;
    }());
    switch (local.modeJs) {
 
 
 
    // init-after
    // run browser js-env code - init-after
    /* istanbul ignore next */
    case 'browser':
        local.testRunBrowser = function (event) {
            Eif (!event || (event &&
                    event.currentTarget &&
                    event.currentTarget.className &&
                    event.currentTarget.className.includes &&
                    event.currentTarget.className.includes('onreset'))) {
                // reset output
                Array.from(
                    document.querySelectorAll('body > .resettable')
                ).forEach(function (element) {
                    switch (element.tagName) {
                    case 'INPUT':
                    case 'TEXTAREA':
                        element.value = '';
                        break;
                    default:
                        element.textContent = '';
                    }
                });
            }
            switch (event && event.currentTarget && event.currentTarget.id) {
            case 'testRunButton1':
                // show tests
                Eif (document.querySelector('#testReportDiv1').style.display === 'none') {
                    document.querySelector('#testReportDiv1').style.display = 'block';
                    document.querySelector('#testRunButton1').textContent =
                        'hide internal test';
                    local.modeTest = true;
                    local.testRunDefault(local);
                // hide tests
                } else {
                    document.querySelector('#testReportDiv1').style.display = 'none';
                    document.querySelector('#testRunButton1').textContent = 'run internal test';
                }
                break;
            // custom-case
            default:
                break;
            }
            Iif (document.querySelector('#inputTextareaEval1') && (!event || (event &&
                    event.currentTarget &&
                    event.currentTarget.className &&
                    event.currentTarget.className.includes &&
                    event.currentTarget.className.includes('oneval')))) {
                // try to eval input-code
                try {
                    /*jslint evil: true*/
                    eval(document.querySelector('#inputTextareaEval1').value);
                } catch (errorCaught) {
                    console.error(errorCaught);
                }
            }
        };
        // log stderr and stdout to #outputTextareaStdout1
        ['error', 'log'].forEach(function (key) {
            console[key + '_original'] = console[key];
            console[key] = function () {
                var element;
                console[key + '_original'].apply(console, arguments);
                element = document.querySelector('#outputTextareaStdout1');
                Iif (!element) {
                    return;
                }
                // append text to #outputTextareaStdout1
                element.value += Array.from(arguments).map(function (arg) {
                    return typeof arg === 'string'
                        ? arg
                        : JSON.stringify(arg, null, 4);
                }).join(' ') + '\n';
                // scroll textarea to bottom
                element.scrollTop = element.scrollHeight;
            };
        });
        // init event-handling
        ['change', 'click', 'keyup'].forEach(function (event) {
            Array.from(document.querySelectorAll('.on' + event)).forEach(function (element) {
                element.addEventListener(event, local.testRunBrowser);
            });
        });
        // run tests
        local.testRunBrowser();
        break;
 
 
 
    // run node js-env code - init-after
    /* istanbul ignore next */
    case 'node':
        // export local
        module.exports = local;
        // require modules
        local.fs = require('fs');
        local.http = require('http');
        local.url = require('url');
        // init assets
        local.assetsDict = local.assetsDict || {};
        /* jslint-ignore-begin */
        local.assetsDict['/assets.index.template.html'] = '\
<!doctype html>\n\
<html lang="en">\n\
<head>\n\
<meta charset="UTF-8">\n\
<meta name="viewport" content="width=device-width, initial-scale=1">\n\
<title>{{env.npm_package_name}} (v{{env.npm_package_version}})</title>\n\
<style>\n\
/*csslint\n\
    box-sizing: false,\n\
    universal-selector: false\n\
*/\n\
* {\n\
    box-sizing: border-box;\n\
}\n\
body {\n\
    background: #dde;\n\
    font-family: Arial, Helvetica, sans-serif;\n\
    margin: 2rem;\n\
}\n\
body > * {\n\
    margin-bottom: 1rem;\n\
}\n\
.utility2FooterDiv {\n\
    margin-top: 20px;\n\
    text-align: center;\n\
}\n\
</style>\n\
<style>\n\
/*csslint\n\
*/\n\
textarea {\n\
    font-family: monospace;\n\
    height: 10rem;\n\
    width: 100%;\n\
}\n\
textarea[readonly] {\n\
    background: #ddd;\n\
}\n\
</style>\n\
</head>\n\
<body>\n\
<!-- utility2-comment\n\
<div id="ajaxProgressDiv1" style="background: #d00; height: 2px; left: 0; margin: 0; padding: 0; position: fixed; top: 0; transition: background 0.5s, width 1.5s; width: 25%;"></div>\n\
utility2-comment -->\n\
<h1>\n\
<!-- utility2-comment\n\
    <a\n\
        {{#if env.npm_package_homepage}}\n\
        href="{{env.npm_package_homepage}}"\n\
        {{/if env.npm_package_homepage}}\n\
        target="_blank"\n\
    >\n\
utility2-comment -->\n\
        {{env.npm_package_name}} (v{{env.npm_package_version}})\n\
<!-- utility2-comment\n\
    </a>\n\
utility2-comment -->\n\
</h1>\n\
<h3>{{env.npm_package_description}}</h3>\n\
<!-- utility2-comment\n\
<h4><a download href="assets.app.js">download standalone app</a></h4>\n\
<button class="onclick onreset" id="testRunButton1">run internal test</button><br>\n\
<div id="testReportDiv1" style="display: none;"></div>\n\
utility2-comment -->\n\
\n\
\n\
\n\
<label>stderr and stdout</label>\n\
<textarea class="resettable" id="outputTextareaStdout1" readonly></textarea>\n\
<!-- utility2-comment\n\
{{#if isRollup}}\n\
<script src="assets.app.js"></script>\n\
{{#unless isRollup}}\n\
utility2-comment -->\n\
<script src="assets.utility2.rollup.js"></script>\n\
<script src="jsonp.utility2._stateInit?callback=window.utility2._stateInit"></script>\n\
<script src="assets.npmtest_grommet.rollup.js"></script>\n\
<script src="assets.example.js"></script>\n\
<script src="assets.test.js"></script>\n\
<!-- utility2-comment\n\
{{/if isRollup}}\n\
utility2-comment -->\n\
<div class="utility2FooterDiv">\n\
    [ this app was created with\n\
    <a href="https://github.com/kaizhu256/node-utility2" target="_blank">utility2</a>\n\
    ]\n\
</div>\n\
</body>\n\
</html>\n\
';
        /* jslint-ignore-end */
        Iif (local.templateRender) {
            local.assetsDict['/'] = local.templateRender(
                local.assetsDict['/assets.index.template.html'],
                {
                    env: local.objectSetDefault(local.env, {
                        npm_package_description: 'the greatest app in the world!',
                        npm_package_name: 'my-app',
                        npm_package_nameAlias: 'my_app',
                        npm_package_version: '0.0.1'
                    })
                }
            );
        } else {
            local.assetsDict['/'] = local.assetsDict['/assets.index.template.html']
                .replace((/\{\{env\.(\w+?)\}\}/g), function (match0, match1) {
                    // jslint-hack
                    String(match0);
                    switch (match1) {
                    case 'npm_package_description':
                        return 'the greatest app in the world!';
                    case 'npm_package_name':
                        return 'my-app';
                    case 'npm_package_nameAlias':
                        return 'my_app';
                    case 'npm_package_version':
                        return '0.0.1';
                    }
                });
        }
        // run the cli
        Eif (local.global.utility2_rollup || module !== require.main) {
            break;
        }
        local.assetsDict['/assets.example.js'] =
            local.assetsDict['/assets.example.js'] ||
            local.fs.readFileSync(__filename, 'utf8');
        // bug-workaround - long $npm_package_buildCustomOrg
        /* jslint-ignore-begin */
        local.assetsDict['/assets.npmtest_grommet.rollup.js'] =
            local.assetsDict['/assets.npmtest_grommet.rollup.js'] ||
            local.fs.readFileSync(
                local.npmtest_grommet.__dirname + '/lib.npmtest_grommet.js',
                'utf8'
            ).replace((/^#!/), '//');
        /* jslint-ignore-end */
        local.assetsDict['/favicon.ico'] = local.assetsDict['/favicon.ico'] || '';
        // if $npm_config_timeout_exit exists,
        // then exit this process after $npm_config_timeout_exit ms
        if (Number(process.env.npm_config_timeout_exit)) {
            setTimeout(process.exit, Number(process.env.npm_config_timeout_exit));
        }
        // start server
        if (local.global.utility2_serverHttp1) {
            break;
        }
        process.env.PORT = process.env.PORT || '8081';
        console.error('server starting on port ' + process.env.PORT);
        local.http.createServer(function (request, response) {
            request.urlParsed = local.url.parse(request.url);
            if (local.assetsDict[request.urlParsed.pathname] !== undefined) {
                response.end(local.assetsDict[request.urlParsed.pathname]);
                return;
            }
            response.statusCode = 404;
            response.end();
        }).listen(process.env.PORT);
        break;
    }
}());
 
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
 
 
 
 
 
 
 
 
 
2
 
2
 
 
 
 
2
 
2
 
2
2
2
 
 
 
 
1
 
 
 
 
 
 
2
 
 
 
2
 
2
 
2
1
 
1
1
1
 
 
 
 
 
/* istanbul instrument in package npmtest_grommet */
/*jslint
    bitwise: true,
    browser: true,
    maxerr: 8,
    maxlen: 96,
    node: true,
    nomen: true,
    regexp: true,
    stupid: true
*/
(function () {
    'use strict';
    var local;
 
 
 
    // run shared js-env code - init-before
    (function () {
        // init local
        local = {};
        // init modeJs
        local.modeJs = (function () {
            try {
                return typeof navigator.userAgent === 'string' &&
                    typeof document.querySelector('body') === 'object' &&
                    typeof XMLHttpRequest.prototype.open === 'function' &&
                    'browser';
            } catch (errorCaughtBrowser) {
                return module.exports &&
                    typeof process.versions.node === 'string' &&
                    typeof require('http').createServer === 'function' &&
                    'node';
            }
        }());
        // init global
        local.global = local.modeJs === 'browser'
            ? window
            : global;
        // init utility2_rollup
        local = local.global.utility2_rollup || local;
        // init lib
        local.local = local.npmtest_grommet = local;
        // init exports
        if (local.modeJs === 'browser') {
            local.global.utility2_npmtest_grommet = local;
        } else {
            module.exports = local;
            module.exports.__dirname = __dirname;
            module.exports.module = module;
        }
    }());
}());
 
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
 
 
 
 
 
 
 
 
 
 
 
2
 
2
 
 
 
 
2
 
2
 
2
2
2
 
 
 
 
1
 
 
 
 
 
 
2
 
 
2
 
 
1
 
 
 
1
 
 
1
 
1
 
 
2
 
 
 
 
 
2
2
 
2
 
 
 
 
 
1
 
 
 
 
 
1
 
 
 
 
 
2
2
 
2
 
 
 
 
 
1
 
 
 
 
 
 
1
 
 
 
1
 
 
1
 
 
 
 
 
 
1
 
 
 
 
 
 
1
1
 
 
1
 
 
 
 
 
 
1
1
1
1
1
1
 
 
1
 
 
 
 
2
2
 
 
1
 
 
 
 
 
 
2
2
 
 
1
 
 
 
 
 
 
2
2
 
 
1
 
 
 
 
 
 
2
2
 
 
1
 
 
 
 
 
 
1
1
 
 
 
1
1
 
 
 
 
/* istanbul instrument in package npmtest_grommet */
/*jslint
    bitwise: true,
    browser: true,
    maxerr: 8,
    maxlen: 96,
    node: true,
    nomen: true,
    regexp: true,
    stupid: true
*/
(function () {
    'use strict';
    var local;
 
 
 
    // run shared js-env code - init-before
    (function () {
        // init local
        local = {};
        // init modeJs
        local.modeJs = (function () {
            try {
                return typeof navigator.userAgent === 'string' &&
                    typeof document.querySelector('body') === 'object' &&
                    typeof XMLHttpRequest.prototype.open === 'function' &&
                    'browser';
            } catch (errorCaughtBrowser) {
                return module.exports &&
                    typeof process.versions.node === 'string' &&
                    typeof require('http').createServer === 'function' &&
                    'node';
            }
        }());
        // init global
        local.global = local.modeJs === 'browser'
            ? window
            : global;
        switch (local.modeJs) {
        // re-init local from window.local
        case 'browser':
            local = local.global.utility2.objectSetDefault(
                local.global.utility2_rollup || local.global.local,
                local.global.utility2
            );
            break;
        // re-init local from example.js
        case 'node':
            local = (local.global.utility2_rollup || require('utility2'))
                .requireReadme();
            break;
        }
        // export local
        local.global.local = local;
    }());
 
 
 
    // run shared js-env code - function
    (function () {
        return;
    }());
    switch (local.modeJs) {
 
 
 
    // run browser js-env code - function
    case 'browser':
        break;
 
 
 
    // run node js-env code - function
    case 'node':
        break;
    }
 
 
 
    // run shared js-env code - init-after
    (function () {
        return;
    }());
    switch (local.modeJs) {
 
 
 
    // run browser js-env code - init-after
    case 'browser':
        local.testCase_browser_nullCase = local.testCase_browser_nullCase || function (
            options,
            onError
        ) {
        /*
         * this function will test browsers's null-case handling-behavior-behavior
         */
            onError(null, options);
        };
 
        // run tests
        local.nop(local.modeTest &&
            document.querySelector('#testRunButton1') &&
            document.querySelector('#testRunButton1').click());
        break;
 
 
 
    // run node js-env code - init-after
    /* istanbul ignore next */
    case 'node':
        local.testCase_buildApidoc_default = local.testCase_buildApidoc_default || function (
            options,
            onError
        ) {
        /*
         * this function will test buildApidoc's default handling-behavior-behavior
         */
            options = { modulePathList: module.paths };
            local.buildApidoc(options, onError);
        };
 
        local.testCase_buildApp_default = local.testCase_buildApp_default || function (
            options,
            onError
        ) {
        /*
         * this function will test buildApp's default handling-behavior-behavior
         */
            local.testCase_buildReadme_default(options, local.onErrorThrow);
            local.testCase_buildLib_default(options, local.onErrorThrow);
            local.testCase_buildTest_default(options, local.onErrorThrow);
            local.testCase_buildCustomOrg_default(options, local.onErrorThrow);
            options = [];
            local.buildApp(options, onError);
        };
 
        local.testCase_buildCustomOrg_default = local.testCase_buildCustomOrg_default ||
            function (options, onError) {
            /*
             * this function will test buildCustomOrg's default handling-behavior
             */
                options = {};
                local.buildCustomOrg(options, onError);
            };
 
        local.testCase_buildLib_default = local.testCase_buildLib_default || function (
            options,
            onError
        ) {
        /*
         * this function will test buildLib's default handling-behavior
         */
            options = {};
            local.buildLib(options, onError);
        };
 
        local.testCase_buildReadme_default = local.testCase_buildReadme_default || function (
            options,
            onError
        ) {
        /*
         * this function will test buildReadme's default handling-behavior-behavior
         */
            options = {};
            local.buildReadme(options, onError);
        };
 
        local.testCase_buildTest_default = local.testCase_buildTest_default || function (
            options,
            onError
        ) {
        /*
         * this function will test buildTest's default handling-behavior
         */
            options = {};
            local.buildTest(options, onError);
        };
 
        local.testCase_webpage_default = local.testCase_webpage_default || function (
            options,
            onError
        ) {
        /*
         * this function will test webpage's default handling-behavior
         */
            options = { modeCoverageMerge: true, url: local.serverLocalHost + '?modeTest=1' };
            local.browserTest(options, onError);
        };
 
        // run test-server
        local.testRunServer(local);
        break;
    }
}());
 
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
'use strict';
 
// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
var Grommet = {
  /**
   * Components.  Note that Collapsible and DateTimeDrop are private
   * and shouldn't be exposed here.
   */
  Accordion: require('./components/Accordion'),
  AccordionPanel: require('./components/AccordionPanel'),
  Anchor: require('./components/Anchor'),
  Animate: require('./components/Animate'),
  App: require('./components/App'),
  Article: require('./components/Article'),
  Box: require('./components/Box'),
  Button: require('./components/Button'),
  Card: require('./components/Card'),
  Carousel: require('./components/Carousel'),
  chart: {
    Area: require('./components/chart/Area'),
    Axis: require('./components/chart/Axis'),
    Bar: require('./components/chart/Bar'),
    Base: require('./components/chart/Base'),
    Chart: require('./components/chart/Chart'),
    Grid: require('./components/chart/Grid'),
    HotSpots: require('./components/chart/HotSpots'),
    Layers: require('./components/chart/Layers'),
    Line: require('./components/chart/Line'),
    Marker: require('./components/chart/Marker'),
    MarkerLabel: require('./components/chart/MarkerLabel'),
    Range: require('./components/chart/Range')
  },
  CheckBox: require('./components/CheckBox'),
  Columns: require('./components/Columns'),
  DateTime: require('./components/DateTime'),
  Distribution: require('./components/Distribution'),
  Footer: require('./components/Footer'),
  Form: require('./components/Form'),
  FormattedMessage: require('./components/FormattedMessage'),
  FormField: require('./components/FormField'),
  FormFields: require('./components/FormFields'),
  Grommet: require('./components/Grommet'),
  Header: require('./components/Header'),
  Heading: require('./components/Heading'),
  Headline: require('./components/Headline'),
  Hero: require('./components/Hero'),
  Image: require('./components/Image'),
  Label: require('./components/Label'),
  Layer: require('./components/Layer'),
  Legend: require('./components/Legend'),
  List: require('./components/List'),
  ListItem: require('./components/ListItem'),
  LoginForm: require('./components/LoginForm'),
  Map: require('./components/Map'),
  Markdown: require('./components/Markdown'),
  Menu: require('./components/Menu'),
  Meter: require('./components/Meter'),
  Notification: require('./components/Notification'),
  NumberInput: require('./components/NumberInput'),
  Object: require('./components/Object'),
  Paragraph: require('./components/Paragraph'),
  Quote: require('./components/Quote'),
  RadioButton: require('./components/RadioButton'),
  Search: require('./components/Search'),
  SearchInput: require('./components/SearchInput'),
  Section: require('./components/Section'),
  Select: require('./components/Select'),
  Sidebar: require('./components/Sidebar'),
  SkipLinkAnchor: require('./components/SkipLinkAnchor'),
  SkipLinks: require('./components/SkipLinks'),
  SocialShare: require('./components/SocialShare'),
  Split: require('./components/Split'),
  SunBurst: require('./components/SunBurst'),
  SVGIcon: require('./components/SVGIcon'),
  Tab: require('./components/Tab'),
  Table: require('./components/Table'),
  TableHeader: require('./components/TableHeader'),
  TableRow: require('./components/TableRow'),
  Tabs: require('./components/Tabs'),
  TBD: require('./components/TBD'),
  TextInput: require('./components/TextInput'),
  Tile: require('./components/Tile'),
  Tiles: require('./components/Tiles'),
  Timestamp: require('./components/Timestamp'),
  Tip: require('./components/Tip'),
  Title: require('./components/Title'),
  Toast: require('./components/Toast'),
  Topology: require('./components/Topology'),
  Value: require('./components/Value'),
  Video: require('./components/Video'),
  WorldMap: require('./components/WorldMap'),
  Icons: {
    Grommet: require('./components/icons/Grommet'),
    Pulse: require('./components/icons/Pulse'),
    Spinning: require('./components/icons/Spinning'),
    Status: require('./components/icons/Status'),
    Base: require('./components/icons/base')
  },
  // Utils
  Cookies: require('./utils/Cookies'),
  DOM: require('./utils/DOM'),
  KeyboardAccelerators: require('./utils/KeyboardAccelerators'),
  Locale: require('./utils/Locale'),
  Rest: require('./utils/Rest'),
  Validator: require('./utils/Validator')
};
 
module.exports = Grommet;
 

1
2
3
4
 
 
1
 
"use strict";
 
module.exports = { "3d": require('./components/icons/base/3d.js'), "AccessAccessibility": require('./components/icons/base/AccessAccessibility.js'), "AccessAd": require('./components/icons/base/AccessAd.js'), "AccessAssistListening": require('./components/icons/base/AccessAssistListening.js'), "AccessBraille": require('./components/icons/base/AccessBraille.js'), "AccessSign": require('./components/icons/base/AccessSign.js'), "AccessTty": require('./components/icons/base/AccessTty.js'), "AccessVolumeControl": require('./components/icons/base/AccessVolumeControl.js'), "AccessWheelchairActive": require('./components/icons/base/AccessWheelchairActive.js'), "AccessWheelchair": require('./components/icons/base/AccessWheelchair.js'), "Accessible": require('./components/icons/base/Accessible.js'), "Achievement": require('./components/icons/base/Achievement.js'), "Action": require('./components/icons/base/Action.js'), "Actions": require('./components/icons/base/Actions.js'), "AddChapter": require('./components/icons/base/AddChapter.js'), "AddCircle": require('./components/icons/base/AddCircle.js'), "Add": require('./components/icons/base/Add.js'), "Aed": require('./components/icons/base/Aed.js'), "Aggregate": require('./components/icons/base/Aggregate.js'), "AidOption": require('./components/icons/base/AidOption.js'), "Aid": require('./components/icons/base/Aid.js'), "Alarm": require('./components/icons/base/Alarm.js'), "Alert": require('./components/icons/base/Alert.js'), "Analytics": require('./components/icons/base/Analytics.js'), "Announce": require('./components/icons/base/Announce.js'), "Apps": require('./components/icons/base/Apps.js'), "Archive": require('./components/icons/base/Archive.js'), "Article": require('./components/icons/base/Article.js'), "Ascend": require('./components/icons/base/Ascend.js'), "Atm": require('./components/icons/base/Atm.js'), "Attachment": require('./components/icons/base/Attachment.js'), "Attraction": require('./components/icons/base/Attraction.js'), "Baby": require('./components/icons/base/Baby.js'), "BackTen": require('./components/icons/base/BackTen.js'), "BarChart": require('./components/icons/base/BarChart.js'), "Bar": require('./components/icons/base/Bar.js'), "Basket": require('./components/icons/base/Basket.js'), "Blog": require('./components/icons/base/Blog.js'), "Book": require('./components/icons/base/Book.js'), "Bookmark": require('./components/icons/base/Bookmark.js'), "BottomCorner": require('./components/icons/base/BottomCorner.js'), "BrandAppleAppStore": require('./components/icons/base/BrandAppleAppStore.js'), "BrandCodepenEdit": require('./components/icons/base/BrandCodepenEdit.js'), "BrandCodepenTry": require('./components/icons/base/BrandCodepenTry.js'), "BrandGooglePlay": require('./components/icons/base/BrandGooglePlay.js'), "BrandGrommetOutline": require('./components/icons/base/BrandGrommetOutline.js'), "BrandGrommetPath": require('./components/icons/base/BrandGrommetPath.js'), "BrandHpeElementOutline": require('./components/icons/base/BrandHpeElementOutline.js'), "BrandHpeElementPath": require('./components/icons/base/BrandHpeElementPath.js'), "BrandHpeLabsInsigniaOutline": require('./components/icons/base/BrandHpeLabsInsigniaOutline.js'), "BrandHpeLabsInsignia": require('./components/icons/base/BrandHpeLabsInsignia.js'), "BrandHpeStackCentered": require('./components/icons/base/BrandHpeStackCentered.js'), "BrandHpeStack": require('./components/icons/base/BrandHpeStack.js'), "Briefcase": require('./components/icons/base/Briefcase.js'), "Brush": require('./components/icons/base/Brush.js'), "Bug": require('./components/icons/base/Bug.js'), "Bundle": require('./components/icons/base/Bundle.js'), "Bus": require('./components/icons/base/Bus.js'), "BusinessService": require('./components/icons/base/BusinessService.js'), "Cafeteria": require('./components/icons/base/Cafeteria.js'), "Calculator": require('./components/icons/base/Calculator.js'), "Calendar": require('./components/icons/base/Calendar.js'), "Camera": require('./components/icons/base/Camera.js'), "Capacity": require('./components/icons/base/Capacity.js'), "Car": require('./components/icons/base/Car.js'), "CaretBack": require('./components/icons/base/CaretBack.js'), "CaretDown": require('./components/icons/base/CaretDown.js'), "CaretNext": require('./components/icons/base/CaretNext.js'), "CaretPrevious": require('./components/icons/base/CaretPrevious.js'), "CaretUp": require('./components/icons/base/CaretUp.js'), "Cart": require('./components/icons/base/Cart.js'), "CatalogOption": require('./components/icons/base/CatalogOption.js'), "Catalog": require('./components/icons/base/Catalog.js'), "Channel": require('./components/icons/base/Channel.js'), "ChapterAdd": require('./components/icons/base/ChapterAdd.js'), "ChapterNext": require('./components/icons/base/ChapterNext.js'), "ChapterPrevious": require('./components/icons/base/ChapterPrevious.js'), "Chat": require('./components/icons/base/Chat.js'), "CheckboxSelected": require('./components/icons/base/CheckboxSelected.js'), "Checkbox": require('./components/icons/base/Checkbox.js'), "Checkmark": require('./components/icons/base/Checkmark.js'), "CircleInformation": require('./components/icons/base/CircleInformation.js'), "CirclePlay": require('./components/icons/base/CirclePlay.js'), "CircleQuestion": require('./components/icons/base/CircleQuestion.js'), "ClearOption": require('./components/icons/base/ClearOption.js'), "Clear": require('./components/icons/base/Clear.js'), "Cli": require('./components/icons/base/Cli.js'), "Clipboard": require('./components/icons/base/Clipboard.js'), "Clock": require('./components/icons/base/Clock.js'), "Clone": require('./components/icons/base/Clone.js'), "Close": require('./components/icons/base/Close.js'), "ClosedCaption": require('./components/icons/base/ClosedCaption.js'), "CloudComputer": require('./components/icons/base/CloudComputer.js'), "CloudDownload": require('./components/icons/base/CloudDownload.js'), "CloudSoftware": require('./components/icons/base/CloudSoftware.js'), "CloudUpload": require('./components/icons/base/CloudUpload.js'), "Cloud": require('./components/icons/base/Cloud.js'), "Cluster": require('./components/icons/base/Cluster.js'), "CoatCheck": require('./components/icons/base/CoatCheck.js'), "Code": require('./components/icons/base/Code.js'), "Columns": require('./components/icons/base/Columns.js'), "Compare": require('./components/icons/base/Compare.js'), "Compass": require('./components/icons/base/Compass.js'), "Compliance": require('./components/icons/base/Compliance.js'), "Configure": require('./components/icons/base/Configure.js'), "Connect": require('./components/icons/base/Connect.js'), "ContactInfo": require('./components/icons/base/ContactInfo.js'), "Contact": require('./components/icons/base/Contact.js'), "Contract": require('./components/icons/base/Contract.js'), "Copy": require('./components/icons/base/Copy.js'), "CreditCard": require('./components/icons/base/CreditCard.js'), "Cube": require('./components/icons/base/Cube.js'), "Cubes": require('./components/icons/base/Cubes.js'), "Currency": require('./components/icons/base/Currency.js'), "Cursor": require('./components/icons/base/Cursor.js'), "Cut": require('./components/icons/base/Cut.js'), "Cycle": require('./components/icons/base/Cycle.js'), "Dashboard": require('./components/icons/base/Dashboard.js'), "Database": require('./components/icons/base/Database.js'), "Deliver": require('./components/icons/base/Deliver.js'), "Deploy": require('./components/icons/base/Deploy.js'), "Descend": require('./components/icons/base/Descend.js'), "Desktop": require('./components/icons/base/Desktop.js'), "Detach": require('./components/icons/base/Detach.js'), "Diamond": require('./components/icons/base/Diamond.js'), "Directions": require('./components/icons/base/Directions.js'), "Dislike": require('./components/icons/base/Dislike.js'), "DocumentCloud": require('./components/icons/base/DocumentCloud.js'), "DocumentConfig": require('./components/icons/base/DocumentConfig.js'), "DocumentCsv": require('./components/icons/base/DocumentCsv.js'), "DocumentDownload": require('./components/icons/base/DocumentDownload.js'), "DocumentExcel": require('./components/icons/base/DocumentExcel.js'), "DocumentExe": require('./components/icons/base/DocumentExe.js'), "DocumentImage": require('./components/icons/base/DocumentImage.js'), "DocumentLocked": require('./components/icons/base/DocumentLocked.js'), "DocumentMissing": require('./components/icons/base/DocumentMissing.js'), "DocumentNotes": require('./components/icons/base/DocumentNotes.js'), "DocumentOutlook": require('./components/icons/base/DocumentOutlook.js'), "DocumentPdf": require('./components/icons/base/DocumentPdf.js'), "DocumentPerformance": require('./components/icons/base/DocumentPerformance.js'), "DocumentPpt": require('./components/icons/base/DocumentPpt.js'), "DocumentRtf": require('./components/icons/base/DocumentRtf.js'), "DocumentSound": require('./components/icons/base/DocumentSound.js'), "DocumentStore": require('./components/icons/base/DocumentStore.js'), "DocumentTest": require('./components/icons/base/DocumentTest.js'), "DocumentText": require('./components/icons/base/DocumentText.js'), "DocumentThreat": require('./components/icons/base/DocumentThreat.js'), "DocumentTime": require('./components/icons/base/DocumentTime.js'), "DocumentTransfer": require('./components/icons/base/DocumentTransfer.js'), "DocumentTxt": require('./components/icons/base/DocumentTxt.js'), "DocumentUpdate": require('./components/icons/base/DocumentUpdate.js'), "DocumentUpload": require('./components/icons/base/DocumentUpload.js'), "DocumentUser": require('./components/icons/base/DocumentUser.js'), "DocumentVerified": require('./components/icons/base/DocumentVerified.js'), "DocumentVideo": require('./components/icons/base/DocumentVideo.js'), "DocumentWindows": require('./components/icons/base/DocumentWindows.js'), "DocumentWord": require('./components/icons/base/DocumentWord.js'), "DocumentZip": require('./components/icons/base/DocumentZip.js'), "Document": require('./components/icons/base/Document.js'), "Domain": require('./components/icons/base/Domain.js'), "Down": require('./components/icons/base/Down.js'), "Download": require('./components/icons/base/Download.js'), "Drag": require('./components/icons/base/Drag.js'), "DriveCage": require('./components/icons/base/DriveCage.js'), "Duplicate": require('./components/icons/base/Duplicate.js'), "Edit": require('./components/icons/base/Edit.js'), "Eject": require('./components/icons/base/Eject.js'), "Elevator": require('./components/icons/base/Elevator.js'), "Emergency": require('./components/icons/base/Emergency.js'), "EmptyCircle": require('./components/icons/base/EmptyCircle.js'), "Escalator": require('./components/icons/base/Escalator.js'), "Expand": require('./components/icons/base/Expand.js'), "Fan": require('./components/icons/base/Fan.js'), "FastForward": require('./components/icons/base/FastForward.js'), "Favorite": require('./components/icons/base/Favorite.js'), "Filter": require('./components/icons/base/Filter.js'), "FingerPrint": require('./components/icons/base/FingerPrint.js'), "Flag": require('./components/icons/base/Flag.js'), "FolderCycle": require('./components/icons/base/FolderCycle.js'), "FolderOpen": require('./components/icons/base/FolderOpen.js'), "Folder": require('./components/icons/base/Folder.js'), "FormAdd": require('./components/icons/base/FormAdd.js'), "FormAttachment": require('./components/icons/base/FormAttachment.js'), "FormCalendar": require('./components/icons/base/FormCalendar.js'), "FormCheckmark": require('./components/icons/base/FormCheckmark.js'), "FormClock": require('./components/icons/base/FormClock.js'), "FormClose": require('./components/icons/base/FormClose.js'), "FormCut": require('./components/icons/base/FormCut.js'), "FormDown": require('./components/icons/base/FormDown.js'), "FormEdit": require('./components/icons/base/FormEdit.js'), "FormFilter": require('./components/icons/base/FormFilter.js'), "FormFolder": require('./components/icons/base/FormFolder.js'), "FormLocation": require('./components/icons/base/FormLocation.js'), "FormLock": require('./components/icons/base/FormLock.js'), "FormNextLink": require('./components/icons/base/FormNextLink.js'), "FormNext": require('./components/icons/base/FormNext.js'), "FormPreviousLink": require('./components/icons/base/FormPreviousLink.js'), "FormPrevious": require('./components/icons/base/FormPrevious.js'), "FormRefresh": require('./components/icons/base/FormRefresh.js'), "FormSchedule": require('./components/icons/base/FormSchedule.js'), "FormSearch": require('./components/icons/base/FormSearch.js'), "FormSubtract": require('./components/icons/base/FormSubtract.js'), "FormTrash": require('./components/icons/base/FormTrash.js'), "FormUp": require('./components/icons/base/FormUp.js'), "FormUpload": require('./components/icons/base/FormUpload.js'), "ForwardTen": require('./components/icons/base/ForwardTen.js'), "Gallery": require('./components/icons/base/Gallery.js'), "Gamepad": require('./components/icons/base/Gamepad.js'), "Gift": require('./components/icons/base/Gift.js'), "Globe": require('./components/icons/base/Globe.js'), "Grid": require('./components/icons/base/Grid.js'), "Group": require('./components/icons/base/Group.js'), "Grow": require('./components/icons/base/Grow.js'), "Halt": require('./components/icons/base/Halt.js'), "Help": require('./components/icons/base/Help.js'), "History": require('./components/icons/base/History.js'), "Home": require('./components/icons/base/Home.js'), "HostMaintenance": require('./components/icons/base/HostMaintenance.js'), "Host": require('./components/icons/base/Host.js'), "IceCream": require('./components/icons/base/IceCream.js'), "Image": require('./components/icons/base/Image.js'), "Impact": require('./components/icons/base/Impact.js'), "InProgress": require('./components/icons/base/InProgress.js'), "Inbox": require('./components/icons/base/Inbox.js'), "Indicator": require('./components/icons/base/Indicator.js'), "Info": require('./components/icons/base/Info.js'), "Inherit": require('./components/icons/base/Inherit.js'), "Inspect": require('./components/icons/base/Inspect.js'), "InstallOption": require('./components/icons/base/InstallOption.js'), "Install": require('./components/icons/base/Install.js'), "Integration": require('./components/icons/base/Integration.js'), "Iteration": require('./components/icons/base/Iteration.js'), "Java": require('./components/icons/base/Java.js'), "Language": require('./components/icons/base/Language.js'), "Launch": require('./components/icons/base/Launch.js'), "Layer": require('./components/icons/base/Layer.js'), "License": require('./components/icons/base/License.js'), "Like": require('./components/icons/base/Like.js'), "LineChart": require('./components/icons/base/LineChart.js'), "LinkBottom": require('./components/icons/base/LinkBottom.js'), "LinkDown": require('./components/icons/base/LinkDown.js'), "LinkNext": require('./components/icons/base/LinkNext.js'), "LinkPrevious": require('./components/icons/base/LinkPrevious.js'), "LinkTop": require('./components/icons/base/LinkTop.js'), "LinkUp": require('./components/icons/base/LinkUp.js'), "Link": require('./components/icons/base/Link.js'), "Local": require('./components/icons/base/Local.js'), "LocationPin": require('./components/icons/base/LocationPin.js'), "Location": require('./components/icons/base/Location.js'), "Lock": require('./components/icons/base/Lock.js'), "Login": require('./components/icons/base/Login.js'), "Logout": require('./components/icons/base/Logout.js'), "Lounge": require('./components/icons/base/Lounge.js'), "Magic": require('./components/icons/base/Magic.js'), "MailOption": require('./components/icons/base/MailOption.js'), "Mail": require('./components/icons/base/Mail.js'), "Manual": require('./components/icons/base/Manual.js'), "MapLocation": require('./components/icons/base/MapLocation.js'), "Map": require('./components/icons/base/Map.js'), "Menu": require('./components/icons/base/Menu.js'), "Microphone": require('./components/icons/base/Microphone.js'), "Money": require('./components/icons/base/Money.js'), "Monitor": require('./components/icons/base/Monitor.js'), "More": require('./components/icons/base/More.js'), "Multiple": require('./components/icons/base/Multiple.js'), "Music": require('./components/icons/base/Music.js'), "Navigate": require('./components/icons/base/Navigate.js'), "NewWindow": require('./components/icons/base/NewWindow.js'), "New": require('./components/icons/base/New.js'), "Next": require('./components/icons/base/Next.js'), "Nodes": require('./components/icons/base/Nodes.js'), "Note": require('./components/icons/base/Note.js'), "Notes": require('./components/icons/base/Notes.js'), "Notification": require('./components/icons/base/Notification.js'), "ObjectGroup": require('./components/icons/base/ObjectGroup.js'), "ObjectUngroup": require('./components/icons/base/ObjectUngroup.js'), "Optimize": require('./components/icons/base/Optimize.js'), "Organization": require('./components/icons/base/Organization.js'), "Overview": require('./components/icons/base/Overview.js'), "Paint": require('./components/icons/base/Paint.js'), "Pan": require('./components/icons/base/Pan.js'), "PauseFill": require('./components/icons/base/PauseFill.js'), "Pause": require('./components/icons/base/Pause.js'), "PersonalComputer": require('./components/icons/base/PersonalComputer.js'), "PieChart": require('./components/icons/base/PieChart.js'), "Pin": require('./components/icons/base/Pin.js'), "Plan": require('./components/icons/base/Plan.js'), "PlatformAmazon": require('./components/icons/base/PlatformAmazon.js'), "PlatformAndroid": require('./components/icons/base/PlatformAndroid.js'), "PlatformApple": require('./components/icons/base/PlatformApple.js'), "PlatformArchlinux": require('./components/icons/base/PlatformArchlinux.js'), "PlatformAruba": require('./components/icons/base/PlatformAruba.js'), "PlatformCentos": require('./components/icons/base/PlatformCentos.js'), "PlatformChrome": require('./components/icons/base/PlatformChrome.js'), "PlatformCloudlinux": require('./components/icons/base/PlatformCloudlinux.js'), "PlatformDebian": require('./components/icons/base/PlatformDebian.js'), "PlatformDocker": require('./components/icons/base/PlatformDocker.js'), "PlatformDos": require('./components/icons/base/PlatformDos.js'), "PlatformDropbox": require('./components/icons/base/PlatformDropbox.js'), "PlatformEdge": require('./components/icons/base/PlatformEdge.js'), "PlatformFedora": require('./components/icons/base/PlatformFedora.js'), "PlatformFirefox": require('./components/icons/base/PlatformFirefox.js'), "PlatformFreebsd": require('./components/icons/base/PlatformFreebsd.js'), "PlatformGoogle": require('./components/icons/base/PlatformGoogle.js'), "PlatformHadoop": require('./components/icons/base/PlatformHadoop.js'), "PlatformHeroku": require('./components/icons/base/PlatformHeroku.js'), "PlatformHorton": require('./components/icons/base/PlatformHorton.js'), "PlatformHp": require('./components/icons/base/PlatformHp.js'), "PlatformHpi": require('./components/icons/base/PlatformHpi.js'), "PlatformInternetExplorer": require('./components/icons/base/PlatformInternetExplorer.js'), "PlatformJava": require('./components/icons/base/PlatformJava.js'), "PlatformMandriva": require('./components/icons/base/PlatformMandriva.js'), "PlatformMysql": require('./components/icons/base/PlatformMysql.js'), "PlatformNorton": require('./components/icons/base/PlatformNorton.js'), "PlatformOnedrive": require('./components/icons/base/PlatformOnedrive.js'), "PlatformOpera": require('./components/icons/base/PlatformOpera.js'), "PlatformOracle": require('./components/icons/base/PlatformOracle.js'), "PlatformPiedPiper": require('./components/icons/base/PlatformPiedPiper.js'), "PlatformRaspberry": require('./components/icons/base/PlatformRaspberry.js'), "PlatformReactjs": require('./components/icons/base/PlatformReactjs.js'), "PlatformRedhat": require('./components/icons/base/PlatformRedhat.js'), "PlatformSafariOption": require('./components/icons/base/PlatformSafariOption.js'), "PlatformSafari": require('./components/icons/base/PlatformSafari.js'), "PlatformSco": require('./components/icons/base/PlatformSco.js'), "PlatformSolaris": require('./components/icons/base/PlatformSolaris.js'), "PlatformSuse": require('./components/icons/base/PlatformSuse.js'), "PlatformSwift": require('./components/icons/base/PlatformSwift.js'), "PlatformTurbolinux": require('./components/icons/base/PlatformTurbolinux.js'), "PlatformUbuntu": require('./components/icons/base/PlatformUbuntu.js'), "PlatformUnixware": require('./components/icons/base/PlatformUnixware.js'), "PlatformVmware": require('./components/icons/base/PlatformVmware.js'), "PlatformWindowsLegacy": require('./components/icons/base/PlatformWindowsLegacy.js'), "PlatformWindows": require('./components/icons/base/PlatformWindows.js'), "PlayFill": require('./components/icons/base/PlayFill.js'), "Play": require('./components/icons/base/Play.js'), "Power": require('./components/icons/base/Power.js'), "Previous": require('./components/icons/base/Previous.js'), "Print": require('./components/icons/base/Print.js'), "RadialSelected": require('./components/icons/base/RadialSelected.js'), "Radial": require('./components/icons/base/Radial.js'), "Refresh": require('./components/icons/base/Refresh.js'), "Resources": require('./components/icons/base/Resources.js'), "Restaurant": require('./components/icons/base/Restaurant.js'), "RestroomMen": require('./components/icons/base/RestroomMen.js'), "RestroomWomen": require('./components/icons/base/RestroomWomen.js'), "Restroom": require('./components/icons/base/Restroom.js'), "Resume": require('./components/icons/base/Resume.js'), "Revert": require('./components/icons/base/Revert.js'), "Rewind": require('./components/icons/base/Rewind.js'), "Risk": require('./components/icons/base/Risk.js'), "Robot": require('./components/icons/base/Robot.js'), "Rss": require('./components/icons/base/Rss.js'), "Run": require('./components/icons/base/Run.js'), "Satellite": require('./components/icons/base/Satellite.js'), "Save": require('./components/icons/base/Save.js'), "Scan": require('./components/icons/base/Scan.js'), "ScheduleNew": require('./components/icons/base/ScheduleNew.js'), "SchedulePlay": require('./components/icons/base/SchedulePlay.js'), "Schedule": require('./components/icons/base/Schedule.js'), "Schedules": require('./components/icons/base/Schedules.js'), "Scorecard": require('./components/icons/base/Scorecard.js'), "SearchAdvanced": require('./components/icons/base/SearchAdvanced.js'), "Search": require('./components/icons/base/Search.js'), "Secure": require('./components/icons/base/Secure.js'), "Select": require('./components/icons/base/Select.js'), "Selection": require('./components/icons/base/Selection.js'), "Send": require('./components/icons/base/Send.js'), "ServerCluster": require('./components/icons/base/ServerCluster.js'), "Server": require('./components/icons/base/Server.js'), "Servers": require('./components/icons/base/Servers.js'), "ServicePlay": require('./components/icons/base/ServicePlay.js'), "Services": require('./components/icons/base/Services.js'), "SettignsOption": require('./components/icons/base/SettignsOption.js'), "SettingsOption": require('./components/icons/base/SettingsOption.js'), "Share": require('./components/icons/base/Share.js'), "ShieldSecurity": require('./components/icons/base/ShieldSecurity.js'), "Shield": require('./components/icons/base/Shield.js'), "Shift": require('./components/icons/base/Shift.js'), "Shop": require('./components/icons/base/Shop.js'), "Sidebar": require('./components/icons/base/Sidebar.js'), "SocialAmazon": require('./components/icons/base/SocialAmazon.js'), "SocialAmex": require('./components/icons/base/SocialAmex.js'), "SocialBitcoin": require('./components/icons/base/SocialBitcoin.js'), "SocialCodepen": require('./components/icons/base/SocialCodepen.js'), "SocialCreativeCommons": require('./components/icons/base/SocialCreativeCommons.js'), "SocialDropbox": require('./components/icons/base/SocialDropbox.js'), "SocialFacebookOption": require('./components/icons/base/SocialFacebookOption.js'), "SocialFacebook": require('./components/icons/base/SocialFacebook.js'), "SocialGithub": require('./components/icons/base/SocialGithub.js'), "SocialGooglePlus": require('./components/icons/base/SocialGooglePlus.js'), "SocialGoogleWallet": require('./components/icons/base/SocialGoogleWallet.js'), "SocialInstagram": require('./components/icons/base/SocialInstagram.js'), "SocialLinkedinOption": require('./components/icons/base/SocialLinkedinOption.js'), "SocialLinkedin": require('./components/icons/base/SocialLinkedin.js'), "SocialMail": require('./components/icons/base/SocialMail.js'), "SocialMastercard": require('./components/icons/base/SocialMastercard.js'), "SocialMedium": require('./components/icons/base/SocialMedium.js'), "SocialPaypal": require('./components/icons/base/SocialPaypal.js'), "SocialPinterest": require('./components/icons/base/SocialPinterest.js'), "SocialProductHunt": require('./components/icons/base/SocialProductHunt.js'), "SocialReddit": require('./components/icons/base/SocialReddit.js'), "SocialSkype": require('./components/icons/base/SocialSkype.js'), "SocialSlack": require('./components/icons/base/SocialSlack.js'), "SocialSnapchat": require('./components/icons/base/SocialSnapchat.js'), "SocialSquare": require('./components/icons/base/SocialSquare.js'), "SocialStackOverflow": require('./components/icons/base/SocialStackOverflow.js'), "SocialStripe": require('./components/icons/base/SocialStripe.js'), "SocialTumblr": require('./components/icons/base/SocialTumblr.js'), "SocialTwitter": require('./components/icons/base/SocialTwitter.js'), "SocialVimeo": require('./components/icons/base/SocialVimeo.js'), "SocialVine": require('./components/icons/base/SocialVine.js'), "SocialVisa": require('./components/icons/base/SocialVisa.js'), "SocialWordpress": require('./components/icons/base/SocialWordpress.js'), "SocialYoutube": require('./components/icons/base/SocialYoutube.js'), "Sort": require('./components/icons/base/Sort.js'), "Split": require('./components/icons/base/Split.js'), "Splits": require('./components/icons/base/Splits.js'), "Stakeholder": require('./components/icons/base/Stakeholder.js'), "Standards-3dEffects": require('./components/icons/base/Standards-3dEffects.js'), "StandardsConnectivity": require('./components/icons/base/StandardsConnectivity.js'), "StandardsCss3": require('./components/icons/base/StandardsCss3.js'), "StandardsDevice": require('./components/icons/base/StandardsDevice.js'), "StandardsFireball": require('./components/icons/base/StandardsFireball.js'), "StandardsHtml5": require('./components/icons/base/StandardsHtml5.js'), "StandardsMultimedia": require('./components/icons/base/StandardsMultimedia.js'), "StandardsOfflineStorage": require('./components/icons/base/StandardsOfflineStorage.js'), "StandardsPerformance": require('./components/icons/base/StandardsPerformance.js'), "StandardsSematics": require('./components/icons/base/StandardsSematics.js'), "StarHalf": require('./components/icons/base/StarHalf.js'), "Star": require('./components/icons/base/Star.js'), "StepsOption": require('./components/icons/base/StepsOption.js'), "Steps": require('./components/icons/base/Steps.js'), "StopFill": require('./components/icons/base/StopFill.js'), "Stop": require('./components/icons/base/Stop.js'), "Storage": require('./components/icons/base/Storage.js'), "StreetView": require('./components/icons/base/StreetView.js'), "SubtractCircle": require('./components/icons/base/SubtractCircle.js'), "Subtract": require('./components/icons/base/Subtract.js'), "Support": require('./components/icons/base/Support.js'), "Sync": require('./components/icons/base/Sync.js'), "System": require('./components/icons/base/System.js'), "TableAdd": require('./components/icons/base/TableAdd.js'), "Table": require('./components/icons/base/Table.js'), "Tag": require('./components/icons/base/Tag.js'), "Target": require('./components/icons/base/Target.js'), "Task": require('./components/icons/base/Task.js'), "Tasks": require('./components/icons/base/Tasks.js'), "Technology": require('./components/icons/base/Technology.js'), "Template": require('./components/icons/base/Template.js'), "Terminal": require('./components/icons/base/Terminal.js'), "TestDesktop": require('./components/icons/base/TestDesktop.js'), "Test": require('./components/icons/base/Test.js'), "TextWrap": require('./components/icons/base/TextWrap.js'), "Threats": require('./components/icons/base/Threats.js'), "Ticket": require('./components/icons/base/Ticket.js'), "Tip": require('./components/icons/base/Tip.js'), "Toast": require('./components/icons/base/Toast.js'), "Tools": require('./components/icons/base/Tools.js'), "Tooltip": require('./components/icons/base/Tooltip.js'), "TopCorner": require('./components/icons/base/TopCorner.js'), "Transaction": require('./components/icons/base/Transaction.js'), "Trash": require('./components/icons/base/Trash.js'), "TreeOption": require('./components/icons/base/TreeOption.js'), "Tree": require('./components/icons/base/Tree.js'), "Trigger": require('./components/icons/base/Trigger.js'), "Trophy": require('./components/icons/base/Trophy.js'), "Troubleshoot": require('./components/icons/base/Troubleshoot.js'), "Unlink": require('./components/icons/base/Unlink.js'), "Unlock": require('./components/icons/base/Unlock.js'), "Up": require('./components/icons/base/Up.js'), "Update": require('./components/icons/base/Update.js'), "Upgrade": require('./components/icons/base/Upgrade.js'), "Upload": require('./components/icons/base/Upload.js'), "UserAdd": require('./components/icons/base/UserAdd.js'), "UserAdmin": require('./components/icons/base/UserAdmin.js'), "UserExpert": require('./components/icons/base/UserExpert.js'), "UserFemale": require('./components/icons/base/UserFemale.js'), "UserManager": require('./components/icons/base/UserManager.js'), "UserNew": require('./components/icons/base/UserNew.js'), "UserPolice": require('./components/icons/base/UserPolice.js'), "UserSettings": require('./components/icons/base/UserSettings.js'), "UserWorker": require('./components/icons/base/UserWorker.js'), "User": require('./components/icons/base/User.js'), "Validate": require('./components/icons/base/Validate.js'), "Video": require('./components/icons/base/Video.js'), "View": require('./components/icons/base/View.js'), "VirtualMachine": require('./components/icons/base/VirtualMachine.js'), "VmMaintenance": require('./components/icons/base/VmMaintenance.js'), "VolumeLow": require('./components/icons/base/VolumeLow.js'), "VolumeMute": require('./components/icons/base/VolumeMute.js'), "Volume": require('./components/icons/base/Volume.js'), "Vulnerability": require('./components/icons/base/Vulnerability.js'), "Waypoint": require('./components/icons/base/Waypoint.js'), "Workshop": require('./components/icons/base/Workshop.js'), "ZoomIn": require('./components/icons/base/ZoomIn.js'), "ZoomOut": require('./components/icons/base/ZoomOut.js') };
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
 
 
1
 
 
1
 
1
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
12
12
 
 
24
 
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
500
500
 
 
1000
 
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
 
2
 
 
 
1
 
1
 
151
 
1
 
1
496
 
 
1
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Validator = exports.Rest = exports.Locale = exports.KeyboardAccelerators = exports.DOM = exports.Cookies = exports.WorldMap = exports.Video = exports.Value = exports.Topology = exports.Toast = exports.Title = exports.Tip = exports.Timestamp = exports.Tiles = exports.Tile = exports.TextInput = exports.TBD = exports.Tabs = exports.TableRow = exports.TableHeader = exports.Table = exports.Tab = exports.SVGIcon = exports.SunBurst = exports.Split = exports.SocialShare = exports.SkipLinks = exports.SkipLinkAnchor = exports.Sidebar = exports.Select = exports.Section = exports.SearchInput = exports.Search = exports.RadioButton = exports.Quote = exports.Paragraph = exports.Object = exports.NumberInput = exports.Notification = exports.Meter = exports.Menu = exports.Markdown = exports.Map = exports.LoginForm = exports.ListItem = exports.List = exports.Legend = exports.Layer = exports.Label = exports.Image = exports.Hero = exports.Headline = exports.Heading = exports.Header = exports.Grommet = exports.FormFields = exports.FormField = exports.FormattedMessage = exports.Form = exports.Footer = exports.Distribution = exports.DateTime = exports.Columns = exports.CheckBox = exports.Carousel = exports.Card = exports.Button = exports.Box = exports.Article = exports.App = exports.Animate = exports.Anchor = exports.AccordionPanel = exports.Accordion = exports.Icons = undefined;
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
 
var _Accordion = require('./components/Accordion');
 
Object.defineProperty(exports, 'Accordion', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Accordion).default;
  }
});
 
var _AccordionPanel = require('./components/AccordionPanel');
 
Object.defineProperty(exports, 'AccordionPanel', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_AccordionPanel).default;
  }
});
 
var _Anchor = require('./components/Anchor');
 
Object.defineProperty(exports, 'Anchor', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Anchor).default;
  }
});
 
var _Animate = require('./components/Animate');
 
Object.defineProperty(exports, 'Animate', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Animate).default;
  }
});
 
var _App = require('./components/App');
 
Object.defineProperty(exports, 'App', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_App).default;
  }
});
 
var _Article = require('./components/Article');
 
Object.defineProperty(exports, 'Article', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Article).default;
  }
});
 
var _Box = require('./components/Box');
 
Object.defineProperty(exports, 'Box', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Box).default;
  }
});
 
var _Button = require('./components/Button');
 
Object.defineProperty(exports, 'Button', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Button).default;
  }
});
 
var _Card = require('./components/Card');
 
Object.defineProperty(exports, 'Card', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Card).default;
  }
});
 
var _Carousel = require('./components/Carousel');
 
Object.defineProperty(exports, 'Carousel', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Carousel).default;
  }
});
 
var _chart = require('./components/chart');
 
Object.keys(_chart).forEach(function (key) {
  Iif (key === "default" || key === "__esModule") return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function get() {
      return _chart[key];
    }
  });
});
 
var _CheckBox = require('./components/CheckBox');
 
Object.defineProperty(exports, 'CheckBox', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_CheckBox).default;
  }
});
 
var _Columns = require('./components/Columns');
 
Object.defineProperty(exports, 'Columns', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Columns).default;
  }
});
 
var _DateTime = require('./components/DateTime');
 
Object.defineProperty(exports, 'DateTime', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_DateTime).default;
  }
});
 
var _Distribution = require('./components/Distribution');
 
Object.defineProperty(exports, 'Distribution', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Distribution).default;
  }
});
 
var _Footer = require('./components/Footer');
 
Object.defineProperty(exports, 'Footer', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Footer).default;
  }
});
 
var _Form = require('./components/Form');
 
Object.defineProperty(exports, 'Form', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Form).default;
  }
});
 
var _FormattedMessage = require('./components/FormattedMessage');
 
Object.defineProperty(exports, 'FormattedMessage', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_FormattedMessage).default;
  }
});
 
var _FormField = require('./components/FormField');
 
Object.defineProperty(exports, 'FormField', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_FormField).default;
  }
});
 
var _FormFields = require('./components/FormFields');
 
Object.defineProperty(exports, 'FormFields', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_FormFields).default;
  }
});
 
var _Grommet = require('./components/Grommet');
 
Object.defineProperty(exports, 'Grommet', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Grommet).default;
  }
});
 
var _Header = require('./components/Header');
 
Object.defineProperty(exports, 'Header', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Header).default;
  }
});
 
var _Heading = require('./components/Heading');
 
Object.defineProperty(exports, 'Heading', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Heading).default;
  }
});
 
var _Headline = require('./components/Headline');
 
Object.defineProperty(exports, 'Headline', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Headline).default;
  }
});
 
var _Hero = require('./components/Hero');
 
Object.defineProperty(exports, 'Hero', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Hero).default;
  }
});
 
var _Image = require('./components/Image');
 
Object.defineProperty(exports, 'Image', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Image).default;
  }
});
 
var _Label = require('./components/Label');
 
Object.defineProperty(exports, 'Label', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Label).default;
  }
});
 
var _Layer = require('./components/Layer');
 
Object.defineProperty(exports, 'Layer', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Layer).default;
  }
});
 
var _Legend = require('./components/Legend');
 
Object.defineProperty(exports, 'Legend', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Legend).default;
  }
});
 
var _List = require('./components/List');
 
Object.defineProperty(exports, 'List', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_List).default;
  }
});
 
var _ListItem = require('./components/ListItem');
 
Object.defineProperty(exports, 'ListItem', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_ListItem).default;
  }
});
 
var _LoginForm = require('./components/LoginForm');
 
Object.defineProperty(exports, 'LoginForm', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_LoginForm).default;
  }
});
 
var _Map = require('./components/Map');
 
Object.defineProperty(exports, 'Map', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Map).default;
  }
});
 
var _Markdown = require('./components/Markdown');
 
Object.defineProperty(exports, 'Markdown', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Markdown).default;
  }
});
 
var _Menu = require('./components/Menu');
 
Object.defineProperty(exports, 'Menu', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Menu).default;
  }
});
 
var _Meter = require('./components/Meter');
 
Object.defineProperty(exports, 'Meter', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Meter).default;
  }
});
 
var _Notification = require('./components/Notification');
 
Object.defineProperty(exports, 'Notification', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Notification).default;
  }
});
 
var _NumberInput = require('./components/NumberInput');
 
Object.defineProperty(exports, 'NumberInput', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_NumberInput).default;
  }
});
 
var _Object = require('./components/Object');
 
Object.defineProperty(exports, 'Object', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Object).default;
  }
});
 
var _Paragraph = require('./components/Paragraph');
 
Object.defineProperty(exports, 'Paragraph', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Paragraph).default;
  }
});
 
var _Quote = require('./components/Quote');
 
Object.defineProperty(exports, 'Quote', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Quote).default;
  }
});
 
var _RadioButton = require('./components/RadioButton');
 
Object.defineProperty(exports, 'RadioButton', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_RadioButton).default;
  }
});
 
var _Search = require('./components/Search');
 
Object.defineProperty(exports, 'Search', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Search).default;
  }
});
 
var _SearchInput = require('./components/SearchInput');
 
Object.defineProperty(exports, 'SearchInput', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_SearchInput).default;
  }
});
 
var _Section = require('./components/Section');
 
Object.defineProperty(exports, 'Section', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Section).default;
  }
});
 
var _Select = require('./components/Select');
 
Object.defineProperty(exports, 'Select', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Select).default;
  }
});
 
var _Sidebar = require('./components/Sidebar');
 
Object.defineProperty(exports, 'Sidebar', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Sidebar).default;
  }
});
 
var _SkipLinkAnchor = require('./components/SkipLinkAnchor');
 
Object.defineProperty(exports, 'SkipLinkAnchor', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_SkipLinkAnchor).default;
  }
});
 
var _SkipLinks = require('./components/SkipLinks');
 
Object.defineProperty(exports, 'SkipLinks', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_SkipLinks).default;
  }
});
 
var _SocialShare = require('./components/SocialShare');
 
Object.defineProperty(exports, 'SocialShare', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_SocialShare).default;
  }
});
 
var _Split = require('./components/Split');
 
Object.defineProperty(exports, 'Split', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Split).default;
  }
});
 
var _SunBurst = require('./components/SunBurst');
 
Object.defineProperty(exports, 'SunBurst', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_SunBurst).default;
  }
});
 
var _SVGIcon = require('./components/SVGIcon');
 
Object.defineProperty(exports, 'SVGIcon', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_SVGIcon).default;
  }
});
 
var _Tab = require('./components/Tab');
 
Object.defineProperty(exports, 'Tab', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Tab).default;
  }
});
 
var _Table = require('./components/Table');
 
Object.defineProperty(exports, 'Table', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Table).default;
  }
});
 
var _TableHeader = require('./components/TableHeader');
 
Object.defineProperty(exports, 'TableHeader', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_TableHeader).default;
  }
});
 
var _TableRow = require('./components/TableRow');
 
Object.defineProperty(exports, 'TableRow', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_TableRow).default;
  }
});
 
var _Tabs = require('./components/Tabs');
 
Object.defineProperty(exports, 'Tabs', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Tabs).default;
  }
});
 
var _TBD = require('./components/TBD');
 
Object.defineProperty(exports, 'TBD', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_TBD).default;
  }
});
 
var _TextInput = require('./components/TextInput');
 
Object.defineProperty(exports, 'TextInput', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_TextInput).default;
  }
});
 
var _Tile = require('./components/Tile');
 
Object.defineProperty(exports, 'Tile', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Tile).default;
  }
});
 
var _Tiles = require('./components/Tiles');
 
Object.defineProperty(exports, 'Tiles', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Tiles).default;
  }
});
 
var _Timestamp = require('./components/Timestamp');
 
Object.defineProperty(exports, 'Timestamp', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Timestamp).default;
  }
});
 
var _Tip = require('./components/Tip');
 
Object.defineProperty(exports, 'Tip', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Tip).default;
  }
});
 
var _Title = require('./components/Title');
 
Object.defineProperty(exports, 'Title', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Title).default;
  }
});
 
var _Toast = require('./components/Toast');
 
Object.defineProperty(exports, 'Toast', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Toast).default;
  }
});
 
var _Topology = require('./components/Topology');
 
Object.defineProperty(exports, 'Topology', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Topology).default;
  }
});
 
var _Value = require('./components/Value');
 
Object.defineProperty(exports, 'Value', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Value).default;
  }
});
 
var _Video = require('./components/Video');
 
Object.defineProperty(exports, 'Video', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Video).default;
  }
});
 
var _WorldMap = require('./components/WorldMap');
 
Object.defineProperty(exports, 'WorldMap', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_WorldMap).default;
  }
});
 
var _icons = require('./components/icons');
 
Object.keys(_icons).forEach(function (key) {
  Iif (key === "default" || key === "__esModule") return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function get() {
      return _icons[key];
    }
  });
});
 
var _Cookies = require('./utils/Cookies');
 
Object.defineProperty(exports, 'Cookies', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Cookies).default;
  }
});
 
var _DOM = require('./utils/DOM');
 
Object.defineProperty(exports, 'DOM', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_DOM).default;
  }
});
 
var _KeyboardAccelerators = require('./utils/KeyboardAccelerators');
 
Object.defineProperty(exports, 'KeyboardAccelerators', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_KeyboardAccelerators).default;
  }
});
 
var _Locale = require('./utils/Locale');
 
Object.defineProperty(exports, 'Locale', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Locale).default;
  }
});
 
var _Rest = require('./utils/Rest');
 
Object.defineProperty(exports, 'Rest', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Rest).default;
  }
});
 
var _Validator = require('./utils/Validator');
 
Object.defineProperty(exports, 'Validator', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Validator).default;
  }
});
 
var _indexCommonjs = require('./index-commonjs');
 
var _indexCommonjs2 = _interopRequireDefault(_indexCommonjs);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
var BaseIcons = {};
 
Object.keys(_indexCommonjs2.default.Icons.Base).forEach(function (icon) {
  BaseIcons[icon.replace('Icon', '')] = _indexCommonjs2.default.Icons.Base[icon];
});
 
var Icons = exports.Icons = Object.assign({}, _indexCommonjs2.default.Icons, { Base: BaseIcons });
 
exports.default = _extends({}, _indexCommonjs2.default);
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
 
1
 
 
 
1
 
3
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
5
 
1
 
1
 
1
 
1
 
1
 
1
1
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
1
 
 
1
 
 
 
 
 
 
1
 
 
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
var _react = require('react');
 
var _react2 = _interopRequireDefault(_react);
 
var _classnames = require('classnames');
 
var _classnames2 = _interopRequireDefault(_classnames);
 
var _List = require('./List');
 
var _List2 = _interopRequireDefault(_List);
 
var _CSSClassnames = require('../utils/CSSClassnames');
 
var _CSSClassnames2 = _interopRequireDefault(_CSSClassnames);
 
var _Props = require('../utils/Props');
 
var _Props2 = _interopRequireDefault(_Props);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
var CLASS_ROOT = _CSSClassnames2.default.ACCORDION;
 
var Accordion = function (_Component) {
  _inherits(Accordion, _Component);
 
  function Accordion(props, context) {
    _classCallCheck(this, Accordion);
 
    var _this = _possibleConstructorReturn(this, (Accordion.__proto__ || Object.getPrototypeOf(Accordion)).call(this, props, context));
 
    _this._onPanelChange = _this._onPanelChange.bind(_this);
 
    var active = void 0;
    if (Number.isInteger(_this.props.active)) {
      active = [_this.props.active];
    } else {
      active = _this.props.active || [];
    }
    _this.state = {
      active: active
    };
    return _this;
  }
 
  _createClass(Accordion, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(newProps) {
      if (newProps.active !== this.props.active) {
        this.setState({ active: newProps.active || [] });
      }
    }
  }, {
    key: '_onPanelChange',
    value: function _onPanelChange(index) {
      var active = [].concat(_toConsumableArray(this.state.active));
      var _props = this.props,
          onActive = _props.onActive,
          openMulti = _props.openMulti;
 
 
      var activeIndex = active.indexOf(index);
      if (activeIndex > -1) {
        active.splice(activeIndex, 1);
      } else {
        if (openMulti) {
          active.push(index);
        } else {
          active = [index];
        }
      }
      this.setState({ active: active }, function () {
        if (onActive) {
          if (!openMulti) {
            onActive(active[0]);
          } else {
            onActive(active);
          }
        }
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;
 
      var _props2 = this.props,
          animate = _props2.animate,
          className = _props2.className,
          children = _props2.children;
 
 
      var classes = (0, _classnames2.default)(CLASS_ROOT, className);
 
      var accordionChildren = _react2.default.Children.map(children, function (child, index) {
        return _react2.default.cloneElement(child, {
          active: _this2.state.active.indexOf(index) > -1,
          onChange: function onChange() {
            _this2._onPanelChange(index);
          },
          animate: animate
        });
      });
 
      var restProps = _Props2.default.omit(this.props, Object.keys(Accordion.propTypes));
      return _react2.default.createElement(
        _List2.default,
        _extends({ role: 'tablist', className: classes }, restProps),
        accordionChildren
      );
    }
  }]);
 
  return Accordion;
}(_react.Component);
 
Accordion.displayName = 'Accordion';
exports.default = Accordion;
;
 
Accordion.propTypes = {
  active: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.arrayOf(_react.PropTypes.number)]),
  animate: _react.PropTypes.bool,
  onActive: _react.PropTypes.func,
  openMulti: _react.PropTypes.bool
};
 
Accordion.defaultProps = {
  openMulti: false,
  animate: true
};
module.exports = exports['default'];
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
 
1
 
 
 
2
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
9
 
1
 
1
 
1
 
1
 
1
 
1
1
 
1
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
1
 
 
1
 
 
 
 
 
 
 
 
1
 
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
var _react = require('react');
 
var _react2 = _interopRequireDefault(_react);
 
var _classnames2 = require('classnames');
 
var _classnames3 = _interopRequireDefault(_classnames2);
 
var _Header = require('./Header');
 
var _Header2 = _interopRequireDefault(_Header);
 
var _Button = require('./Button');
 
var _Button2 = _interopRequireDefault(_Button);
 
var _ListItem = require('./ListItem');
 
var _ListItem2 = _interopRequireDefault(_ListItem);
 
var _CaretNext = require('./icons/base/CaretNext');
 
var _CaretNext2 = _interopRequireDefault(_CaretNext);
 
var _Collapsible = require('./Collapsible');
 
var _Collapsible2 = _interopRequireDefault(_Collapsible);
 
var _CSSClassnames = require('../utils/CSSClassnames');
 
var _CSSClassnames2 = _interopRequireDefault(_CSSClassnames);
 
var _Intl = require('../utils/Intl');
 
var _Intl2 = _interopRequireDefault(_Intl);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
var CLASS_ROOT = _CSSClassnames2.default.ACCORDION_PANEL;
 
var AccordionPanel = function (_Component) {
  _inherits(AccordionPanel, _Component);
 
  function AccordionPanel() {
    _classCallCheck(this, AccordionPanel);
 
    var _this = _possibleConstructorReturn(this, (AccordionPanel.__proto__ || Object.getPrototypeOf(AccordionPanel)).call(this));
 
    _this._onClickTab = _this._onClickTab.bind(_this);
    return _this;
  }
 
  _createClass(AccordionPanel, [{
    key: '_onClickTab',
    value: function _onClickTab(event) {
      var onChange = this.props.onChange;
 
      if (event) {
        event.preventDefault();
      }
      onChange();
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          a11yTitle = _props.a11yTitle,
          active = _props.active,
          animate = _props.animate,
          className = _props.className,
          children = _props.children,
          heading = _props.heading,
          pad = _props.pad;
      var intl = this.context.intl;
 
 
      var classes = (0, _classnames3.default)(CLASS_ROOT, className, _defineProperty({}, CLASS_ROOT + '--active', active));
 
      var tabContentTitle = _Intl2.default.getMessage(intl, 'Tab Contents', {
        activeTitle: a11yTitle || heading
      });
 
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          _ListItem2.default,
          { className: classes, direction: 'column', pad: 'none',
            'aria-expanded': active, 'aria-selected': active, role: 'tab',
            'aria-label': a11yTitle || heading },
          _react2.default.createElement(
            _Button2.default,
            { fill: true, plain: true, onClick: this._onClickTab },
            _react2.default.createElement(
              _Header2.default,
              { pad: pad, direction: 'row',
                justify: 'between', align: 'center', responsive: false,
                className: CLASS_ROOT + '__header' },
              heading,
              _react2.default.createElement(_CaretNext2.default, {
                className: CLASS_ROOT + '__control' })
            )
          )
        ),
        _react2.default.createElement(
          _Collapsible2.default,
          { 'aria-label': tabContentTitle, role: 'tabpanel',
            active: active, animate: animate, pad: pad },
          children
        )
      );
    }
  }]);
 
  return AccordionPanel;
}(_react.Component);
 
AccordionPanel.displayName = 'AccordionPanel';
exports.default = AccordionPanel;
;
 
AccordionPanel.propTypes = {
  a11yTitle: _react.PropTypes.string,
  active: _react.PropTypes.bool, // set by Accordion
  animate: _react.PropTypes.bool,
  heading: _react.PropTypes.node.isRequired,
  onChange: _react.PropTypes.func,
  pad: _Header2.default.propTypes.pad
};
 
AccordionPanel.contextTypes = {
  intl: _react.PropTypes.object
};
module.exports = exports['default'];
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
 
 
1
 
 
 
1
 
8
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
4
 
1
 
1
 
1
 
1
 
1
 
1
 
1
1
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
1
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
var _react = require('react');
 
var _react2 = _interopRequireDefault(_react);
 
var _classnames2 = require('classnames');
 
var _classnames3 = _interopRequireDefault(_classnames2);
 
var _reactDesc = require('react-desc');
 
var _reactRouter = require('react-router');
 
var _LinkNext = require('./icons/base/LinkNext');
 
var _LinkNext2 = _interopRequireDefault(_LinkNext);
 
var _CSSClassnames = require('../utils/CSSClassnames');
 
var _CSSClassnames2 = _interopRequireDefault(_CSSClassnames);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
var CLASS_ROOT = _CSSClassnames2.default.ANCHOR;
 
var Anchor = function (_Component) {
  _inherits(Anchor, _Component);
 
  function Anchor(props, context) {
    _classCallCheck(this, Anchor);
 
    var _this = _possibleConstructorReturn(this, (Anchor.__proto__ || Object.getPrototypeOf(Anchor)).call(this, props, context));
 
    _this._onClick = _this._onClick.bind(_this);
    _this._onLocationChange = _this._onLocationChange.bind(_this);
    _this._attachUnlisten = _this._attachUnlisten.bind(_this);
    _this._isRouteActive = _this._isRouteActive.bind(_this);
    var path = props.path;
    var router = context.router;
 
 
    var active = _this._isRouteActive(path, router);
 
    _this.state = { active: active };
    return _this;
  }
 
  _createClass(Anchor, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var path = this.props.path;
 
      if (path) {
        this._attachUnlisten(this.context.router.history || this.context.router);
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var path = nextProps.path;
      var router = this.context.router;
 
      if (path && path !== this.props.path) {
        this._attachUnlisten(router);
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      var path = this.props.path;
 
      if (path) {
        this._unlisten();
      }
      this._unmounted = true;
    }
  }, {
    key: '_isRouteActive',
    value: function _isRouteActive(path, router) {
      if (!path) {
        return false;
      }
      var active = void 0;
      if (router && router.isActive) {
        active = router && router.isActive && path && router.isActive(path.path || path, {
          indexLink: path.index
        });
      } else if (router && _reactRouter.matchPath) {
        active = !!(0, _reactRouter.matchPath)(router.history.location.pathname, { path: path.path || path, exact: !!path.index });
      }
 
      return active;
    }
  }, {
    key: '_attachUnlisten',
    value: function _attachUnlisten(router) {
      this._unlisten = router.listen(this._onLocationChange);
    }
  }, {
    key: '_onLocationChange',
    value: function _onLocationChange(location) {
      // sometimes react router is still calling the listen callback even
      // if we called unlisten. So we added this check here to prevent
      // calling setState in a unmounted component
      if (!this._unmounted) {
        var path = this.props.path;
        var router = this.context.router;
 
        var active = _reactRouter.matchPath ? !!(0, _reactRouter.matchPath)(location.pathname, { path: path.path || path, exact: !!path.index }) : router && location.pathname === (path.path || path);
        this.setState({ active: active });
      }
    }
  }, {
    key: '_onClick',
    value: function _onClick(event) {
      var _props = this.props,
          method = _props.method,
          onClick = _props.onClick,
          path = _props.path,
          disabled = _props.disabled;
      var router = this.context.router;
 
 
      event.preventDefault();
 
      if (!disabled) {
        if (path) {
          if ('push' === method) {
            (router.history || router).push(path.path || path);
          } else if ('replace' === method) {
            (router.history || router).replace(path.path || path);
          }
        }
 
        if (onClick) {
          onClick.apply(undefined, arguments);
        }
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _classnames;
 
      var _props2 = this.props,
          a11yTitle = _props2.a11yTitle,
          align = _props2.align,
          animateIcon = _props2.animateIcon,
          children = _props2.children,
          className = _props2.className,
          disabled = _props2.disabled,
          href = _props2.href,
          icon = _props2.icon,
          label = _props2.label,
          onClick = _props2.onClick,
          path = _props2.path,
          primary = _props2.primary,
          reverse = _props2.reverse,
          tag = _props2.tag,
          props = _objectWithoutProperties(_props2, ['a11yTitle', 'align', 'animateIcon', 'children', 'className', 'disabled', 'href', 'icon', 'label', 'onClick', 'path', 'primary', 'reverse', 'tag']);
 
      delete props.method;
      var active = this.state.active;
      var router = this.context.router;
 
 
      var anchorIcon = void 0;
      if (icon) {
        anchorIcon = icon;
      } else if (primary) {
        anchorIcon = _react2.default.createElement(_LinkNext2.default, { a11yTitle: 'link next' });
      }
 
      if (anchorIcon && !primary && !label) {
        anchorIcon = _react2.default.createElement(
          'span',
          { className: CLASS_ROOT + '__icon' },
          anchorIcon
        );
      }
 
      var hasIcon = anchorIcon !== undefined;
      var anchorChildren = _react.Children.map(children, function (child) {
        if (child && child.type && child.type.icon) {
          hasIcon = true;
          child = _react2.default.createElement(
            'span',
            { className: CLASS_ROOT + '__icon' },
            child
          );
        }
        return child;
      });
 
      var target = path ? path.path || path : undefined;
      var adjustedHref = void 0;
      if (router && router.createPath) {
        adjustedHref = path && router ? router.createPath(target) : href;
      } else {
        adjustedHref = path && router && router.history ? router.history.createHref(typeof target === 'string' ? { pathname: target } : target) : href;
      }
 
      var classes = (0, _classnames3.default)(CLASS_ROOT, (_classnames = {}, _defineProperty(_classnames, CLASS_ROOT + '--animate-icon', hasIcon && animateIcon !== false), _defineProperty(_classnames, CLASS_ROOT + '--disabled', disabled), _defineProperty(_classnames, CLASS_ROOT + '--icon', anchorIcon || hasIcon), _defineProperty(_classnames, CLASS_ROOT + '--icon-label', hasIcon && label), _defineProperty(_classnames, CLASS_ROOT + '--align-' + align, align), _defineProperty(_classnames, CLASS_ROOT + '--primary', primary), _defineProperty(_classnames, CLASS_ROOT + '--reverse', reverse), _defineProperty(_classnames, CLASS_ROOT + '--active', active), _classnames), className);
 
      var adjustedOnClick = path && router ? this._onClick : onClick;
 
      if (!anchorChildren) {
        anchorChildren = label;
      }
 
      var first = reverse ? anchorChildren : anchorIcon;
      var second = reverse ? anchorIcon : anchorChildren;
 
      var Component = tag;
 
      return _react2.default.createElement(
        Component,
        _extends({}, props, { href: adjustedHref, className: classes,
          'aria-label': a11yTitle, onClick: adjustedOnClick }),
        first,
        second
      );
    }
  }]);
 
  return Anchor;
}(_react.Component);
 
Anchor.displayName = 'Anchor';
exports.default = Anchor;
;
 
(0, _reactDesc.schema)(Anchor, {
  description: 'A text link. We have a separate component from the browser\n  base so we can style it. You can either set the icon and/or label properties\n  or just use children.',
  usage: 'import Anchor from \'grommet/components/Anchor\';\n  <Anchor href={location} label="Label" />',
  props: {
    a11yTitle: [_reactDesc.PropTypes.string, 'Accessibility title.'],
    align: [_reactDesc.PropTypes.oneOf(['start', 'center', 'end']), 'Text alignment.'],
    animateIcon: [_reactDesc.PropTypes.bool, 'Whether to animate the icon on hover.', {
      defaultProp: true
    }],
    disabled: [_reactDesc.PropTypes.bool, 'Whether to disable the anchor.'],
    href: [_reactDesc.PropTypes.string, 'Hyperlink reference to place in the anchor.'],
    icon: [_reactDesc.PropTypes.element, 'Icon element to place in the anchor.'],
    id: [_reactDesc.PropTypes.string, 'Anchor identifier.'],
    label: [_reactDesc.PropTypes.node, 'Label text to place in the anchor.'],
    method: [_reactDesc.PropTypes.oneOf(['push', 'replace']), 'Valid only when used with path. Indicates whether the browser history' + ' should be appended to or replaced.', {
      defaultProp: 'push'
    }],
    onClick: [_reactDesc.PropTypes.func, 'Click handler.'],
    path: [_reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.object, _reactDesc.PropTypes.string]), 'React-router path to navigate to when clicked.' + ' Use path={{ path: ' / ', index: true }} if you want the Anchor to be' + ' active only when the index route is current.'],
    primary: [_reactDesc.PropTypes.bool, 'Whether this is a primary anchor.'],
    reverse: [_reactDesc.PropTypes.bool, 'Whether an icon and label should be reversed so that the icon is at ' + 'the end of the anchor.'],
    tag: [_reactDesc.PropTypes.string, 'The DOM tag to use for the element. The default is <a>. This should be' + ' used in conjunction with components like Link from React Router. In' + ' this case, Link controls the navigation while Anchor controls the' + ' styling.', {
      defaultProp: 'a'
    }],
    target: [_reactDesc.PropTypes.string, 'Target of the link.']
  }
});
 
Anchor.contextTypes = {
  router: _react2.default.PropTypes.object
};
module.exports = exports['default'];
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
 
 
1
 
 
 
1
 
1
 
19
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
4
 
1
 
1
 
1
 
2
 
1
 
1
1
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
1
1
 
1
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
1
 
 
1
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
var _react = require('react');
 
var _react2 = _interopRequireDefault(_react);
 
var _reactDom = require('react-dom');
 
var _reactAddonsTransitionGroup = require('react-addons-transition-group');
 
var _reactAddonsTransitionGroup2 = _interopRequireDefault(_reactAddonsTransitionGroup);
 
var _classnames = require('classnames');
 
var _classnames2 = _interopRequireDefault(_classnames);
 
var _CSSClassnames = require('../utils/CSSClassnames');
 
var _CSSClassnames2 = _interopRequireDefault(_CSSClassnames);
 
var _DOM = require('../utils/DOM');
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
var CLASS_ROOT = _CSSClassnames2.default.ANIMATE;
 
var AnimateChild = function (_Component) {
  _inherits(AnimateChild, _Component);
 
  function AnimateChild(props, context) {
    _classCallCheck(this, AnimateChild);
 
    var _this = _possibleConstructorReturn(this, (AnimateChild.__proto__ || Object.getPrototypeOf(AnimateChild)).call(this, props, context));
 
    var enter = props.enter,
        leave = props.leave;
    // leave will reuse enter if leave is not defined
 
    _this.state = {
      enter: enter,
      leave: leave || enter,
      state: 'inactive'
    };
    return _this;
  }
 
  _createClass(AnimateChild, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var enter = nextProps.enter,
          leave = nextProps.leave;
 
      this.setState({ enter: enter, leave: leave || enter });
      if (nextProps.visible !== this.props.visible) {
        var _ref = nextProps.visible ? ['enter', 'active'] : ['leave', 'inactive'],
            _ref2 = _slicedToArray(_ref, 2),
            nextState = _ref2[0],
            lastState = _ref2[1];
 
        this._delay(nextState, this._done.bind(this, lastState));
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this._timer) {
        clearTimeout(this._timer);
        this._timer = undefined;
      }
    }
  }, {
    key: 'componentWillAppear',
    value: function componentWillAppear(callback) {
      if (true === this.props.visible) {
        this._delay('enter', callback);
      }
    }
  }, {
    key: 'componentWillEnter',
    value: function componentWillEnter(callback) {
      if (true === this.props.visible) {
        this._delay('enter', callback);
      }
    }
  }, {
    key: 'componentDidAppear',
    value: function componentDidAppear() {
      this._done('active');
    }
  }, {
    key: 'componentDidEnter',
    value: function componentDidEnter() {
      this._done('active');
    }
  }, {
    key: 'componentWillLeave',
    value: function componentWillLeave(callback) {
      this._delay('leave', callback);
    }
  }, {
    key: 'componentDidLeave',
    value: function componentDidLeave(callback) {
      this._done('inactive');
    }
  }, {
    key: '_delay',
    value: function _delay(state, callback) {
      var delay = this.state[state].delay;
      // ensure we start out inactive in case we aren't being kept in the DOM
 
      if ('enter' === state) {
        this.setState({ state: 'inactive ' });
      }
      clearTimeout(this._timer);
      this._timer = setTimeout(this._start.bind(this, state, callback), delay || 1);
    }
  }, {
    key: '_start',
    value: function _start(state, callback) {
      var duration = this.state[state].duration;
 
      this.setState({ state: state });
      this._timer = setTimeout(callback, duration);
    }
  }, {
    key: '_done',
    value: function _done(state) {
      this.setState({ state: state });
    }
  }, {
    key: 'render',
    value: function render() {
      var children = this.props.children;
      var _state = this.state,
          enter = _state.enter,
          leave = _state.leave,
          state = _state.state;
 
      var animation = (this.state[state] || this.state.enter).animation;
      var className = (0, _classnames2.default)(CLASS_ROOT + '__child', CLASS_ROOT + '__child--' + animation, CLASS_ROOT + '__child--' + state);
      var duration = 'enter' === state || 'inactive' === state ? enter.duration : leave.duration;
      var style = { transitionDuration: (duration || 0) + 'ms' };
      return _react2.default.createElement(
        'div',
        { className: className, style: style },
        children
      );
    }
  }]);
 
  return AnimateChild;
}(_react.Component);
 
AnimateChild.displayName = 'AnimateChild';
;
 
AnimateChild.propTypes = {
  enter: _react.PropTypes.shape({
    animation: _react.PropTypes.string,
    duration: _react.PropTypes.number,
    delay: _react.PropTypes.number
  }).isRequired,
  leave: _react.PropTypes.shape({
    animation: _react.PropTypes.string,
    duration: _react.PropTypes.number,
    delay: _react.PropTypes.number
  }),
  visible: _react.PropTypes.bool
};
 
AnimateChild.defaultProps = {
  visible: false
};
 
var Animate = function (_Component2) {
  _inherits(Animate, _Component2);
 
  function Animate(props, context) {
    _classCallCheck(this, Animate);
 
    var _this2 = _possibleConstructorReturn(this, (Animate.__proto__ || Object.getPrototypeOf(Animate)).call(this, props, context));
 
    _this2._checkScroll = _this2._checkScroll.bind(_this2);
    _this2.state = { visible: true === props.visible };
    return _this2;
  }
 
  _createClass(Animate, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      if ('scroll' === this.props.visible) {
        this._listenForScroll();
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var visible = this.props.visible;
 
      if (visible !== nextProps.visible) {
        if ('scroll' === visible) {
          this._unlistenForScroll();
        } else if ('scroll' === nextProps.visible) {
          this._listenForScroll();
        }
        this.setState({ visible: true === nextProps.visible });
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if ('scroll' === this.props.visible) {
        this._unlistenForScroll();
      }
    }
  }, {
    key: '_listenForScroll',
    value: function _listenForScroll() {
      var _this3 = this;
 
      this._scrollParents = (0, _DOM.findScrollParents)(this);
      this._scrollParents.forEach(function (scrollParent) {
        scrollParent.addEventListener('scroll', _this3._checkScroll);
      });
    }
  }, {
    key: '_unlistenForScroll',
    value: function _unlistenForScroll() {
      var _this4 = this;
 
      this._scrollParents.forEach(function (scrollParent) {
        scrollParent.removeEventListener('scroll', _this4._checkScroll);
      });
      this._scrollParents = undefined;
    }
  }, {
    key: '_checkScroll',
    value: function _checkScroll() {
      var group = (0, _reactDom.findDOMNode)(this);
      var rect = group.getBoundingClientRect();
      if (rect.top < window.innerHeight) {
        if (!this.state.visible) {
          this.setState({ visible: true });
        }
      } else {
        if (this.state.visible) {
          this.setState({ visible: false });
        }
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          enter = _props.enter,
          leave = _props.leave,
          className = _props.className,
          children = _props.children,
          component = _props.component,
          keep = _props.keep,
          props = _objectWithoutProperties(_props, ['enter', 'leave', 'className', 'children', 'component', 'keep']);
 
      delete props.visible;
      var visible = this.state.visible;
 
 
      var classes = (0, _classnames2.default)(CLASS_ROOT, className);
 
      var animateChildren = void 0;
      if (keep || visible) {
        animateChildren = _react2.default.Children.map(children, function (child, index) {
          return _react2.default.createElement(
            AnimateChild,
            { key: index, enter: enter, leave: leave,
              visible: visible },
            child
          );
        });
      }
 
      return _react2.default.createElement(
        _reactAddonsTransitionGroup2.default,
        _extends({}, props, { className: classes, component: component }),
        animateChildren
      );
    }
  }]);
 
  return Animate;
}(_react.Component);
 
Animate.displayName = 'Animate';
exports.default = Animate;
;
 
var ANIMATIONS = ['fade', 'slide-up', 'slide-down', 'slide-left', 'slide-right', 'jiggle'];
 
Animate.propTypes = {
  component: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.func]),
  enter: _react.PropTypes.shape({
    animation: _react.PropTypes.oneOf(ANIMATIONS).isRequired,
    duration: _react.PropTypes.number,
    delay: _react.PropTypes.number
  }).isRequired,
  keep: _react.PropTypes.bool,
  leave: _react.PropTypes.shape({
    animation: _react.PropTypes.oneOf(ANIMATIONS).isRequired,
    duration: _react.PropTypes.number,
    delay: _react.PropTypes.number
  }),
  visible: _react.PropTypes.oneOfType([_react.PropTypes.oneOf(['scroll']), _react.PropTypes.bool])
};
 
Animate.defaultProps = {
  component: 'div',
  enter: { animation: 'fade', duration: 300 },
  visible: true
};
module.exports = exports['default'];
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
 
1
 
 
 
1
 
2
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
4
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
1
2
 
 
 
1
1
1
1
1
1
 
 
1
1
 
1
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
1
 
 
1
 
 
 
 
1
 
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
var _react = require('react');
 
var _react2 = _interopRequireDefault(_react);
 
var _classnames2 = require('classnames');
 
var _classnames3 = _interopRequireDefault(_classnames2);
 
var _Locale = require('../utils/Locale');
 
var _SkipLinks = require('./SkipLinks');
 
var _SkipLinks2 = _interopRequireDefault(_SkipLinks);
 
var _CSSClassnames = require('../utils/CSSClassnames');
 
var _CSSClassnames2 = _interopRequireDefault(_CSSClassnames);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
var CLASS_ROOT = _CSSClassnames2.default.APP;
 
var supportedLocales = ['en-US', 'pt-BR'];
 
function localesSupported() {
  return global.Intl && supportedLocales.every(function (locale) {
    return Intl.NumberFormat.supportedLocalesOf(locale)[0] === locale && Intl.DateTimeFormat.supportedLocalesOf(locale)[0] === locale;
  });
}
 
Eif (!localesSupported()) {
  require('intl');
  require('intl/locale-data/jsonp/en-US.js');
  require('intl/locale-data/jsonp/pt-BR.js');
  Intl.NumberFormat = IntlPolyfill.NumberFormat;
  Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
}
 
var App = function (_Component) {
  _inherits(App, _Component);
 
  function App(props, context) {
    _classCallCheck(this, App);
 
    var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props, context));
 
    _this.state = {
      lang: 'en-US'
    };
    return _this;
  }
 
  _createClass(App, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var lang = this.props.lang || (0, _Locale.getCurrentLocale)();
 
      if (!document.documentElement.getAttribute('lang')) {
        document.documentElement.setAttribute('lang', lang);
      }
      this.setState({ lang: lang });
    }
  }, {
    key: 'render',
    value: function render() {
      var _classnames;
 
      var _props = this.props,
          centered = _props.centered,
          children = _props.children,
          className = _props.className,
          inline = _props.inline,
          props = _objectWithoutProperties(_props, ['centered', 'children', 'className', 'inline']);
 
      var lang = this.state.lang;
 
 
      var classes = (0, _classnames3.default)('grommet', CLASS_ROOT, (_classnames = {}, _defineProperty(_classnames, CLASS_ROOT + '--centered', centered), _defineProperty(_classnames, CLASS_ROOT + '--inline', inline), _classnames), className);
 
      return _react2.default.createElement(
        'div',
        _extends({ lang: lang, className: classes }, props),
        children,
        _react2.default.createElement(_SkipLinks2.default, null),
        _react2.default.createElement('div', { className: CLASS_ROOT + '__announcer', 'aria-live': 'polite' })
      );
    }
  }]);
 
  return App;
}(_react.Component);
 
App.displayName = 'App';
exports.default = App;
 
 
App.propTypes = {
  centered: _react.PropTypes.bool,
  inline: _react.PropTypes.bool
};
 
App.defaultProps = {
  centered: true
};
module.exports = exports['default'];
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
 
 
1
 
 
 
1
 
26
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
13
 
1
 
1
 
1
 
1
 
1
1
 
1
1
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
1
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
var _react = require('react');
 
var _react2 = _interopRequireDefault(_react);
 
var _reactDom = require('react-dom');
 
var _classnames2 = require('classnames');
 
var _classnames3 = _interopRequireDefault(_classnames2);
 
var _Box = require('./Box');
 
var _Box2 = _interopRequireDefault(_Box);
 
var _KeyboardAccelerators = require('../utils/KeyboardAccelerators');
 
var _KeyboardAccelerators2 = _interopRequireDefault(_KeyboardAccelerators);
 
var _DOM = require('../utils/DOM');
 
var _Props = require('../utils/Props');
 
var _Props2 = _interopRequireDefault(_Props);
 
var _Scroll = require('../utils/Scroll');
 
var _Scroll2 = _interopRequireDefault(_Scroll);
 
var _Responsive = require('../utils/Responsive');
 
var _Responsive2 = _interopRequireDefault(_Responsive);
 
var _Button = require('./Button');
 
var _Button2 = _interopRequireDefault(_Button);
 
var _LinkNext = require('./icons/base/LinkNext');
 
var _LinkNext2 = _interopRequireDefault(_LinkNext);
 
var _LinkPrevious = require('./icons/base/LinkPrevious');
 
var _LinkPrevious2 = _interopRequireDefault(_LinkPrevious);
 
var _Up = require('./icons/base/Up');
 
var _Up2 = _interopRequireDefault(_Up);
 
var _Down = require('./icons/base/Down');
 
var _Down2 = _interopRequireDefault(_Down);
 
var _CSSClassnames = require('../utils/CSSClassnames');
 
var _CSSClassnames2 = _interopRequireDefault(_CSSClassnames);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
var CLASS_ROOT = _CSSClassnames2.default.ARTICLE;
var DEFAULT_PLAY_INTERVAL = 10000; // 10s
 
var Article = function (_Component) {
  _inherits(Article, _Component);
 
  function Article(props, context) {
    _classCallCheck(this, Article);
 
    var _this = _possibleConstructorReturn(this, (Article.__proto__ || Object.getPrototypeOf(Article)).call(this, props, context));
 
    _this._onScroll = _this._onScroll.bind(_this);
    _this._onWheel = _this._onWheel.bind(_this);
    _this._onTouchStart = _this._onTouchStart.bind(_this);
    _this._onTouchMove = _this._onTouchMove.bind(_this);
    _this._onResize = _this._onResize.bind(_this);
    _this._onNext = _this._onNext.bind(_this);
    _this._onPrevious = _this._onPrevious.bind(_this);
    _this._onTogglePlay = _this._onTogglePlay.bind(_this);
    _this._onSelect = _this._onSelect.bind(_this);
    _this._checkControls = _this._checkControls.bind(_this);
    _this._checkPreviousNextControls = _this._checkPreviousNextControls.bind(_this);
    _this._onResponsive = _this._onResponsive.bind(_this);
    _this._updateHiddenElements = _this._updateHiddenElements.bind(_this);
    _this._updateProgress = _this._updateProgress.bind(_this);
 
    // Necessary to detect for Firefox or Edge to implement accessibility
    // tabbing
    var accessibilityTabbingCompatible = typeof navigator !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 && navigator.userAgent.indexOf('Edge') === -1;
 
    _this.state = {
      selectedIndex: props.selected || 0,
      playing: false,
      accessibilityTabbingCompatible: accessibilityTabbingCompatible
    };
    return _this;
  }
 
  _createClass(Article, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this._propsSetup(this.props);
      if (this.state.selectedIndex) {
        this._onSelect(this.state.selectedIndex);
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (!nextProps.scrollStep && this.props.scrollStep) {
        _KeyboardAccelerators2.default.stopListeningToKeyboard(this, this._keys);
        document.removeEventListener('wheel', this._onWheel);
        window.removeEventListener('resize', this._onResize);
      }
      if (!nextProps.onProgress && this.props.onProgress) {
        if (this._responsive) {
          this._responsive.stop();
        }
        if (this.props.onProgress) {
          window.removeEventListener('scroll', this._updateProgress);
        }
      }
 
      this._propsSetup(nextProps);
 
      // allow updates to selected props to trigger new chapter select
      if (typeof nextProps.selected !== 'undefined' && nextProps.selected !== null && nextProps.selected !== this.state.selectedIndex) {
        this._onSelect(nextProps.selected);
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.props.scrollStep) {
        _KeyboardAccelerators2.default.stopListeningToKeyboard(this, this._keys);
        document.removeEventListener('wheel', this._onWheel);
        window.removeEventListener('resize', this._onResize);
      }
      if (this._responsive) {
        this._responsive.stop();
      }
      if (this.props.onProgress) {
        window.removeEventListener('scroll', this._updateProgress);
      }
    }
  }, {
    key: '_propsSetup',
    value: function _propsSetup(props) {
      var direction = props.direction,
          full = props.full,
          onProgress = props.onProgress,
          scrollStep = props.scrollStep;
 
      if (scrollStep) {
        if (full) {
          console.warn('Article cannot use `scrollStep` with `full`.');
        }
 
        this._keys = { up: this._onPrevious, down: this._onNext };
        if ('row' === direction) {
          this._keys = {
            left: this._onPrevious,
            right: this._onNext
          };
 
          if (this.state.accessibilityTabbingCompatible) {
            this._updateHiddenElements();
          }
        }
        //keys.space = this._onTogglePlay;
        _KeyboardAccelerators2.default.startListeningToKeyboard(this, this._keys);
 
        document.addEventListener('wheel', this._onWheel);
        window.addEventListener('resize', this._onResize);
 
        this._checkControls();
 
        if ('row' === direction) {
          this._responsive = _Responsive2.default.start(this._onResponsive);
        }
      }
 
      if (onProgress) {
        window.addEventListener('scroll', this._updateProgress);
 
        if (direction === 'row') {
          this._responsive = _Responsive2.default.start(this._onResponsive);
        }
      }
    }
  }, {
    key: '_childDOMNode',
    value: function _childDOMNode(index) {
      var componentElement = (0, _reactDom.findDOMNode)(this._componentRef);
      return componentElement.children[index];
    }
  }, {
    key: '_checkPreviousNextControls',
    value: function _checkPreviousNextControls(currentScroll, nextProp, prevProp) {
      var selectedIndex = this.state.selectedIndex;
 
      if (currentScroll > 0) {
        var nextStepNode = this._childDOMNode(selectedIndex + 1);
        var previousStepNode = this._childDOMNode(selectedIndex - 1);
 
        if (nextStepNode) {
          var nextStepPosition = nextStepNode.getBoundingClientRect()[nextProp] * (selectedIndex + 1);
 
          if (currentScroll > nextStepPosition) {
            this.setState({ selectedIndex: selectedIndex + 1 });
          }
        }
 
        if (previousStepNode) {
          var previousStepPosition = previousStepNode.getBoundingClientRect()[prevProp] * selectedIndex;
 
          if (currentScroll < previousStepPosition) {
            this.setState({ selectedIndex: selectedIndex - 1 });
          }
        }
      }
    }
  }, {
    key: '_checkControls',
    value: function _checkControls() {
      var direction = this.props.direction;
 
      if (direction === 'row') {
        var currentScroll = this._componentRef.boxContainerRef.scrollLeft;
        this._checkPreviousNextControls(currentScroll, 'left', 'right');
      } else {
        var _currentScroll = this._componentRef.boxContainerRef.scrollTop;
        this._checkPreviousNextControls(_currentScroll, 'top', 'bottom');
      }
    }
  }, {
    key: '_visibleIndexes',
    value: function _visibleIndexes() {
      var _props = this.props,
          children = _props.children,
          direction = _props.direction;
 
      var result = [];
      var childCount = _react2.default.Children.count(children);
      var limit = 'row' === direction ? window.innerWidth : window.innerHeight;
      for (var index = 0; index < childCount; index += 1) {
        var childElement = this._childDOMNode(index);
        var rect = childElement.getBoundingClientRect();
        // ignore small drifts of 10 pixels on either end
        if ('row' === direction) {
          if (rect.right > 10 && rect.left < limit - 10) {
            result.push(index);
          } else if (result.length > 0) {
            break;
          }
        } else {
          if (rect.bottom > 10 && rect.top < limit - 10) {
            result.push(index);
          } else if (result.length > 0) {
            break;
          }
        }
      }
      return result;
    }
  }, {
    key: '_shortTimer',
    value: function _shortTimer(name, duration) {
      var _this2 = this;
 
      if (!this[name]) {
        this[name] = true;
      }
      var timerName = this[name] + 'Timer';
      clearTimeout(this[timerName]);
      this[timerName] = setTimeout(function () {
        _this2[name] = false;
      }, duration);
    }
  }, {
    key: '_onWheel',
    value: function _onWheel(event) {
      var _this3 = this;
 
      var direction = this.props.direction;
 
      if ('row' === direction) {
        if (this._scrollingHorizontally) {
          // no-op
        } else if (!this._scrollingVertically) {
          if (Math.abs(event.deltaY * 2) > Math.abs(event.deltaX)) {
            // user is scrolling vertically
            this._shortTimer('_scrollingVertically', 1000);
          }
        }
      } else {
        // Give the user lots of control.
        var delta = event.deltaY;
        if (Math.abs(delta) > 100) {
          // The user is expressing a resolute interest in controlling the
          // scrolling behavior. Stop doing any of our scroll step aligning
          // until he stops expressing such interest.
          clearInterval(this._wheelTimer);
          clearInterval(this._wheelLongTimer);
          this._wheelLongTimer = setTimeout(function () {
            _this3._wheelLongTimer = undefined;
          }, 2000);
        } else if (!this._wheelLongTimer) {
          if (delta > 10) {
            clearInterval(this._wheelTimer);
            this._wheelTimer = setTimeout(this._onNext, 200);
          } else if (delta < -10) {
            clearInterval(this._wheelTimer);
            this._wheelTimer = setTimeout(this._onPrevious, 200);
          } else {
            clearInterval(this._controlTimer);
            this._controlTimer = setTimeout(this._checkControls, 200);
          }
        }
      }
    }
  }, {
    key: '_onScroll',
    value: function _onScroll(event) {
      var _this4 = this;
 
      var direction = this.props.direction;
 
      if ('row' === direction) {
        var selectedIndex = this.state.selectedIndex;
 
        var componentElement = (0, _reactDom.findDOMNode)(this._componentRef);
        var childElement = this._childDOMNode(selectedIndex);
        var rect = childElement.getBoundingClientRect();
        if (event.target === componentElement) {
          // scrolling Article
          if (this._scrollingVertically) {
            // prevent Article horizontal scrolling while scrolling vertically
            componentElement.scrollLeft += rect.left;
          } else {
            var scrollingRight = this._priorScrollLeft < componentElement.scrollLeft;
            // once we stop scrolling, align with child boundaries
            clearTimeout(this._scrollTimer);
            this._scrollTimer = setTimeout(function () {
              if (!_this4._resizing) {
                var indexes = _this4._visibleIndexes();
                if (indexes.length > 1 && scrollingRight) {
                  _this4._onSelect(indexes[1]);
                } else {
                  _this4._onSelect(indexes[0]);
                }
              }
            }, 100);
            this._priorScrollLeft = componentElement.scrollLeft;
          }
        } else if (event.target.parentNode === componentElement) {
          // scrolling child
          // Has it scrolled near the bottom?
          if (this.state.accessibilityTabbingCompatible) {
            // only use lastGrandChild logic if we're not using Firefox or IE.
            // causes flashing in Firefox, but required for Safari scrolling.
            var grandchildren = event.target.children;
            var lastGrandChild = grandchildren[grandchildren.length - 1];
            rect = lastGrandChild.getBoundingClientRect();
          }
          if (rect.bottom <= window.innerHeight + 24) {
            // at the bottom
            this.setState({ atBottom: true });
          } else {
            // not at the bottom
            this.setState({ atBottom: false });
          }
        }
      }
    }
  }, {
    key: '_onTouchStart',
    value: function _onTouchStart(event) {
      var touched = event.changedTouches[0];
      this._touchStartX = touched.clientX;
      this._touchStartY = touched.clientY;
    }
  }, {
    key: '_onTouchMove',
    value: function _onTouchMove(event) {
      var touched = event.changedTouches[0];
      var deltaX = touched.clientX - this._touchStartX;
      var deltaY = touched.clientY - this._touchStartY;
      // Only step if the user isn't scrolling vertically, bias vertically
      if (Math.abs(deltaY) < Math.abs(deltaX * 2)) {
        if (deltaX < 0) {
          this._onNext();
        } else {
          this._onPrevious();
        }
      }
    }
  }, {
    key: '_onResize',
    value: function _onResize() {
      var _this5 = this;
 
      clearTimeout(this._resizeTimer);
      this._resizeTimer = setTimeout(function () {
        _this5._onSelect(_this5.state.selectedIndex);
        _this5._shortTimer('_resizing', 1000);
      }, 50);
    }
  }, {
    key: '_onNext',
    value: function _onNext(event, wrap) {
      // only process if the focus is NOT in a form element
      if (!(0, _DOM.isFormElement)(document.activeElement)) {
        var children = this.props.children;
        var selectedIndex = this.state.selectedIndex;
 
        var childCount = _react2.default.Children.count(children);
        if (event) {
          this._stop();
          event.preventDefault();
        }
        var targetIndex = this._visibleIndexes()[0] + 1;
        if (targetIndex !== selectedIndex) {
          if (targetIndex < childCount) {
            this._onSelect(Math.min(childCount - 1, targetIndex));
          } else if (wrap) {
            this._onSelect(1);
          }
        }
      }
    }
  }, {
    key: '_onPrevious',
    value: function _onPrevious(event) {
      // only process if the focus is NOT in a form element
      if (!(0, _DOM.isFormElement)(document.activeElement)) {
        var selectedIndex = this.state.selectedIndex;
 
        if (event) {
          this._stop();
          event.preventDefault();
        }
        var targetIndex = this._visibleIndexes()[0] - 1;
        if (targetIndex !== selectedIndex) {
          this._onSelect(Math.max(0, targetIndex));
        }
      }
    }
  }, {
    key: '_start',
    value: function _start() {
      var _this6 = this;
 
      this._playTimer = setInterval(function () {
        _this6._onNext(null, true);
      }, DEFAULT_PLAY_INTERVAL);
      this.setState({ playing: true });
    }
  }, {
    key: '_stop',
    value: function _stop() {
      clearInterval(this._playTimer);
      this.setState({ playing: false });
    }
  }, {
    key: '_onTogglePlay',
    value: function _onTogglePlay(event) {
      event.preventDefault();
      if (this.state.playing) {
        this._stop();
      } else {
        this._start();
      }
    }
  }, {
    key: '_onSelect',
    value: function _onSelect(selectedIndex) {
      var _this7 = this;
 
      var _props2 = this.props,
          direction = _props2.direction,
          onSelect = _props2.onSelect;
 
      var componentElement = (0, _reactDom.findDOMNode)(this._componentRef);
      var childElement = this._childDOMNode(selectedIndex);
      var windowHeight = window.innerHeight + 24;
 
      if (childElement) {
        if (selectedIndex !== this.state.selectedIndex) {
          var parentElement = childElement.parentNode;
          var atBottom = Math.round(parentElement.scrollTop) >= parentElement.scrollHeight - parentElement.clientHeight;
 
          // scroll child to top
          childElement.scrollTop = 0;
          // ensures controls are displayed when selecting a new index and
          // scrollbar is at bottom of article
          this.setState({
            selectedIndex: selectedIndex,
            atBottom: atBottom
          }, function () {
            if (onSelect) {
              onSelect(selectedIndex);
            }
 
            // Necessary to detect for Firefox or Edge to implement accessibility
            // tabbing
            if (direction === 'row' && _this7.state.accessibilityTabbingCompatible) {
              _this7._anchorStepRef.focus();
              _this7._updateHiddenElements();
            }
          });
        } else if (childElement.scrollHeight <= windowHeight) {
          // on initial chapter load, ensure arrows are rendered
          // when there are no scrollbars
          this.setState({ atBottom: true });
        }
 
        var rect = childElement.getBoundingClientRect();
        if ('row' === direction) {
          if (rect.left !== 0) {
            this._scrollingHorizontally = true;
            _Scroll2.default.scrollBy(componentElement, 'scrollLeft', rect.left, function () {
              _this7._scrollingHorizontally = false;
            });
          }
        } else {
          if (rect.top !== 0) {
            this._scrollingVertically = true;
            _Scroll2.default.scrollBy(componentElement, 'scrollTop', rect.top, function () {
              _this7._scrollingVertically = false;
            });
          }
        }
      }
    }
  }, {
    key: '_onResponsive',
    value: function _onResponsive(small) {
      this.setState({ narrow: small });
    }
  }, {
    key: '_toggleDisableChapter',
    value: function _toggleDisableChapter(chapter, disabled) {
      var elements = (0, _DOM.filterByFocusable)(chapter.getElementsByTagName('*'));
 
      if (elements) {
        elements.forEach(function (element) {
          if (disabled) {
            element.setAttribute('disabled', 'disabled');
          } else {
            element.removeAttribute('disabled');
          }
 
          element.setAttribute('tabindex', disabled ? '-1' : '0');
        });
      }
    }
  }, {
    key: '_updateHiddenElements',
    value: function _updateHiddenElements() {
      var component = (0, _reactDom.findDOMNode)(this._componentRef);
      var children = component.children;
      for (var i = 0; i < children.length; i++) {
        var child = children[i];
        if (child.getAttribute('aria-hidden')) {
          this._toggleDisableChapter(child, true);
        } else {
          this._toggleDisableChapter(child, false);
        }
      }
    }
  }, {
    key: '_updateProgress',
    value: function _updateProgress(event) {
      var _props3 = this.props,
          direction = _props3.direction,
          responsive = _props3.responsive;
      var narrow = this.state.narrow;
 
      var article = (0, _reactDom.findDOMNode)(this._componentRef);
      var articleRect = article.getBoundingClientRect();
 
      var offset = direction === 'column' ? Math.abs(articleRect.top) : Math.abs(articleRect.left);
      var totalDistance = direction === 'column' ? window.innerHeight : this._getChildrenWidth(this._componentRef.boxContainerRef.childNodes);
      var objectDistance = direction === 'column' ? articleRect.height : articleRect.width;
 
      // Covers row responding to column layout.
      if (direction === 'row' && narrow && responsive !== false) {
        offset = Math.abs(articleRect.top);
        totalDistance = window.innerHeight;
        objectDistance = articleRect.height;
      }
 
      var progress = Math.abs(offset / (objectDistance - totalDistance));
      var scrollPercentRounded = Math.round(progress * 100);
      this.props.onProgress(scrollPercentRounded);
    }
  }, {
    key: '_renderControls',
    value: function _renderControls() {
      var direction = this.props.direction;
      var _state = this.state,
          atBottom = _state.atBottom,
          narrow = _state.narrow,
          selectedIndex = _state.selectedIndex;
 
      var CONTROL_CLASS_PREFIX = CLASS_ROOT + '__control ' + CLASS_ROOT + '__control';
      var childCount = _react2.default.Children.count(this.props.children);
      var controls = [];
 
      var a11yTitle = this.props.a11yTitle || {};
      if ('row' === direction) {
        if (!narrow || atBottom) {
          if (selectedIndex > 0) {
            controls.push(_react2.default.createElement(_Button2.default, { key: 'previous',
              plain: true, a11yTitle: a11yTitle.previous,
              className: CONTROL_CLASS_PREFIX + '-left',
              onClick: this._onPrevious, icon: _react2.default.createElement(_LinkPrevious2.default, {
                a11yTitle: 'article-previous-title', size: 'large' }) }));
          }
          if (selectedIndex < childCount - 1) {
            controls.push(_react2.default.createElement(_Button2.default, { key: 'next',
              plain: true, a11yTitle: a11yTitle.next,
              className: CONTROL_CLASS_PREFIX + '-right',
              onClick: this._onNext, icon: _react2.default.createElement(_LinkNext2.default, {
                size: 'large', a11yTitle: 'article-next-title' }) }));
          }
        }
      } else {
        if (selectedIndex > 0) {
          controls.push(_react2.default.createElement(
            _Button2.default,
            { key: 'previous',
              plain: true, a11yTitle: a11yTitle.previous,
              className: CONTROL_CLASS_PREFIX + '-up',
              onClick: this._onPrevious },
            _react2.default.createElement(_Up2.default, null)
          ));
        }
        if (selectedIndex < childCount - 1) {
          controls.push(_react2.default.createElement(
            _Button2.default,
            { key: 'next', plain: true, a11yTitle: a11yTitle.next,
              className: CONTROL_CLASS_PREFIX + '-down', onClick: this._onNext },
            _react2.default.createElement(_Down2.default, { a11yTitle: 'article-down' })
          ));
        }
      }
 
      return controls;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this8 = this;
 
      var _props4 = this.props,
          className = _props4.className,
          primary = _props4.primary,
          scrollStep = _props4.scrollStep;
      var selectedIndex = this.state.selectedIndex;
 
      var classes = (0, _classnames3.default)(CLASS_ROOT, _defineProperty({}, CLASS_ROOT + '--scroll-step', scrollStep), className);
 
      var boxProps = _Props2.default.pick(this.props, Object.keys(_Box2.default.propTypes));
      var restProps = _Props2.default.omit(this.props, Object.keys(Article.propTypes));
 
      var controls = void 0;
      if (this.props.controls) {
        controls = this._renderControls();
      }
 
      var anchorStepNode = void 0;
      if (this.state.accessibilityTabbingCompatible) {
        anchorStepNode = _react2.default.createElement('a', { tabIndex: '-1', 'aria-hidden': 'true',
          ref: function ref(_ref) {
            return _this8._anchorStepRef = _ref;
          } });
      }
 
      var children = this.props.children;
      if (scrollStep || controls) {
        children = _react.Children.map(this.props.children, function (element, index) {
          if (element) {
 
            if (controls) {
              var ariaHidden = void 0;
              if (selectedIndex !== index && _this8.state.accessibilityTabbingCompatible) {
                ariaHidden = 'true';
              }
 
              element = _react2.default.createElement(
                'div',
                { 'aria-hidden': ariaHidden },
                element
              );
            }
 
            return element;
          }
 
          return undefined;
        }, this);
      }
 
      delete boxProps.a11yTitle;
 
      return _react2.default.createElement(
        _Box2.default,
        _extends({}, restProps, boxProps, { ref: function ref(_ref2) {
            return _this8._componentRef = _ref2;
          },
          tag: 'article', className: classes, primary: primary,
          onScroll: this._onScroll, onTouchStart: this._onTouchStart,
          onTouchMove: this._onTouchMove }),
        children,
        controls,
        anchorStepNode
      );
    }
  }]);
 
  return Article;
}(_react.Component);
 
Article.displayName = 'Article';
exports.default = Article;
 
 
Article.propTypes = _extends({
  controls: _react.PropTypes.bool
}, _Box2.default.propTypes, {
  a11yTitle: _react.PropTypes.shape({
    next: _react.PropTypes.string,
    previous: _react.PropTypes.string
  }),
  onProgress: _react.PropTypes.func,
  onSelect: _react.PropTypes.func,
  scrollStep: _react.PropTypes.bool,
  selected: _react.PropTypes.number
});
 
Article.defaultProps = {
  pad: 'none',
  direction: 'column'
};
module.exports = exports['default'];
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
 
 
1
 
 
 
1
 
1
 
9
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
6
 
1
 
1
 
1
 
1
1
 
1
1
 
1
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
1
 
 
1
1
1
1
1
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
1
 
 
 
 
 
 
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
var _react = require('react');
 
var _react2 = _interopRequireDefault(_react);
 
var _reactDom = require('react-dom');
 
var _KeyboardAccelerators = require('../utils/KeyboardAccelerators');
 
var _KeyboardAccelerators2 = _interopRequireDefault(_KeyboardAccelerators);
 
var _Intl = require('../utils/Intl');
 
var _Intl2 = _interopRequireDefault(_Intl);
 
var _Props = require('../utils/Props');
 
var _Props2 = _interopRequireDefault(_Props);
 
var _DOM = require('../utils/DOM');
 
var _SkipLinkAnchor = require('./SkipLinkAnchor');
 
var _SkipLinkAnchor2 = _interopRequireDefault(_SkipLinkAnchor);
 
var _CSSClassnames = require('../utils/CSSClassnames');
 
var _CSSClassnames2 = _interopRequireDefault(_CSSClassnames);
 
var _Announcer = require('../utils/Announcer');
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
var CLASS_ROOT = _CSSClassnames2.default.BOX;
var BACKGROUND_COLOR_INDEX = _CSSClassnames2.default.BACKGROUND_COLOR_INDEX;
 
var Box = function (_Component) {
  _inherits(Box, _Component);
 
  function Box(props) {
    _classCallCheck(this, Box);
 
    var _this = _possibleConstructorReturn(this, (Box.__proto__ || Object.getPrototypeOf(Box)).call(this, props));
 
    _this.state = { mouseActive: false };
    return _this;
  }
 
  _createClass(Box, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;
 
      var onClick = this.props.onClick;
 
      if (onClick) {
        var clickCallback = function clickCallback() {
          if (_this2.boxContainerRef === document.activeElement) {
            onClick();
          }
        };
 
        _KeyboardAccelerators2.default.startListeningToKeyboard(this, {
          enter: clickCallback,
          space: clickCallback
        });
      }
 
      this._setDarkBackground();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.colorIndex !== this.props.colorIndex) {
        if (nextProps.colorIndex) {
          this.setState({ updateDarkBackground: true });
        } else {
          this.setState({ darkBackground: undefined });
        }
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      if (this.props.announce) {
        (0, _Announcer.announce)(this.boxContainerRef.textContent);
      }
      if (this.state.updateDarkBackground) {
        this.setState({ updateDarkBackground: false });
        this._setDarkBackground();
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.props.onClick) {
        _KeyboardAccelerators2.default.stopListeningToKeyboard(this);
      }
      if (this._checkBackground) {
        this._checkBackground.stop();
      }
    }
  }, {
    key: '_setDarkBackground',
    value: function _setDarkBackground() {
      var _this3 = this;
 
      var colorIndex = this.props.colorIndex;
 
      var box = (0, _reactDom.findDOMNode)(this.boxContainerRef);
      if (this._checkBackground) {
        this._checkBackground.stop();
      }
      this._checkBackground = (0, _DOM.checkDarkBackground)(colorIndex, box, function (darkBackground) {
        return _this3.setState({ darkBackground: darkBackground });
      });
    }
  }, {
    key: '_normalize',
    value: function _normalize(string) {
      return string.replace('/', '-');
    }
  }, {
    key: '_addPropertyClass',
    value: function _addPropertyClass(classes, property) {
      var _this4 = this;
 
      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
      var value = (options.object || this.props)[property];
      var elementName = options.elementName || CLASS_ROOT;
      var prefix = options.prefix || property;
      if (value) {
        if (typeof value === 'string') {
          classes.push(elementName + '--' + prefix + '-' + this._normalize(value));
        } else if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
          Object.keys(value).forEach(function (key) {
            _this4._addPropertyClass(classes, key, {
              object: value, prefix: prefix + '-' + key });
          });
        } else {
          classes.push(elementName + '--' + this._normalize(prefix));
        }
      }
    }
  }, {
    key: '_backgroundContextClass',
    value: function _backgroundContextClass(darkBackground) {
      var result = void 0;
      if (undefined === darkBackground) {
        result = BACKGROUND_COLOR_INDEX + '--pending';
      } else if (darkBackground) {
        result = BACKGROUND_COLOR_INDEX + '--dark';
      } else {
        result = BACKGROUND_COLOR_INDEX + '--light';
      }
      return result;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this5 = this;
 
      var _props = this.props,
          a11yTitle = _props.a11yTitle,
          appCentered = _props.appCentered,
          backgroundImage = _props.backgroundImage,
          children = _props.children,
          className = _props.className,
          colorIndex = _props.colorIndex,
          containerClassName = _props.containerClassName,
          focusable = _props.focusable,
          id = _props.id,
          onClick = _props.onClick,
          _onBlur = _props.onBlur,
          _onFocus = _props.onFocus,
          _onMouseDown = _props.onMouseDown,
          _onMouseUp = _props.onMouseUp,
          pad = _props.pad,
          primary = _props.primary,
          role = _props.role,
          size = _props.size,
          tabIndex = _props.tabIndex,
          tag = _props.tag,
          texture = _props.texture;
      var _state = this.state,
          darkBackground = _state.darkBackground,
          mouseActive = _state.mouseActive;
 
      var classes = [CLASS_ROOT];
      var containerClasses = [CLASS_ROOT + '__container'];
      var restProps = _Props2.default.omit(this.props, Object.keys(Box.propTypes));
      this._addPropertyClass(classes, 'full');
      this._addPropertyClass(classes, 'direction');
      this._addPropertyClass(classes, 'justify');
      this._addPropertyClass(classes, 'align');
      this._addPropertyClass(classes, 'alignContent', { prefix: 'align-content' });
      this._addPropertyClass(classes, 'alignSelf', { prefix: 'align-self' });
      this._addPropertyClass(classes, 'reverse');
      this._addPropertyClass(classes, 'responsive');
      this._addPropertyClass(classes, 'basis');
      this._addPropertyClass(classes, 'flex');
      this._addPropertyClass(classes, 'pad');
      this._addPropertyClass(classes, 'margin');
      this._addPropertyClass(classes, 'separator');
      this._addPropertyClass(classes, 'textAlign', { prefix: 'text-align' });
      this._addPropertyClass(classes, 'wrap');
 
      if (this.props.hasOwnProperty('flex')) {
        if (!this.props.flex) {
          classes.push(CLASS_ROOT + '--flex-off');
        }
      }
      if (size) {
        if ((typeof size === 'undefined' ? 'undefined' : _typeof(size)) === 'object') {
          Object.keys(size).forEach(function (key) {
            _this5._addPropertyClass(classes, key, { object: size });
          });
        } else {
          this._addPropertyClass(classes, 'size');
        }
        if (size) {
          if (!(size.width && size.width.max)) {
            // don't apply 100% max-width when size using size.width.max option
            classes.push(CLASS_ROOT + '--size');
          }
          if (size.width && size.width.max) {
            // allow widths to shrink, apply 100% width
            classes.push(CLASS_ROOT + '--width-max');
          }
        }
      }
 
      // needed to properly set flex-basis for 1/3 & 2/3 basis boxes
      if (pad && pad.between && children) {
        if (_react2.default.Children.count(children) % 3 === 0) {
          classes.push(CLASS_ROOT + '--pad-between-thirds');
        }
      }
 
      if (appCentered) {
        this._addPropertyClass(containerClasses, 'full', { elementName: CLASS_ROOT + '__container' });
        if (colorIndex) {
          containerClasses.push(BACKGROUND_COLOR_INDEX + '-' + colorIndex);
          containerClasses.push(this._backgroundContextClass(darkBackground));
        }
        if (containerClassName) {
          containerClasses.push(containerClassName);
        }
      } else if (colorIndex) {
        classes.push(BACKGROUND_COLOR_INDEX + '-' + colorIndex);
        classes.push(this._backgroundContextClass(darkBackground));
      }
 
      var a11yProps = {};
      var clickableProps = {};
      if (onClick) {
        classes.push(CLASS_ROOT + "--clickable");
        clickableProps = {
          onMouseDown: function onMouseDown(event) {
            _this5.setState({ mouseActive: true });
            if (_onMouseDown) {
              _onMouseDown(event);
            }
          },
          onMouseUp: function onMouseUp(event) {
            _this5.setState({ mouseActive: false });
            if (_onMouseUp) {
              _onMouseUp(event);
            }
          },
          onFocus: function onFocus(event) {
            if (mouseActive === false) {
              _this5.setState({ focus: true });
            }
            if (_onFocus) {
              _onFocus(event);
            }
          },
          onBlur: function onBlur(event) {
            _this5.setState({ focus: false });
            if (_onBlur) {
              _onBlur(event);
            }
          }
        };
        if (focusable) {
          if (this.state.focus) {
            classes.push(CLASS_ROOT + '--focus');
          }
          var boxLabel = typeof a11yTitle !== 'undefined' ? a11yTitle : _Intl2.default.getMessage(this.context.intl, 'Box');
          a11yProps.tabIndex = tabIndex || 0;
          a11yProps["aria-label"] = this.props['aria-label'] || boxLabel;
          a11yProps.role = role || 'group';
        }
      }
 
      var skipLinkAnchor = void 0;
      if (primary) {
        var mainContentLabel = _Intl2.default.getMessage(this.context.intl, 'Main Content');
        skipLinkAnchor = _react2.default.createElement(_SkipLinkAnchor2.default, { label: mainContentLabel });
      }
 
      if (className) {
        classes.push(className);
      }
 
      var style = {};
      if (texture && 'string' === typeof texture) {
        if (texture.indexOf('url(') !== -1) {
          style.backgroundImage = texture;
        } else {
          style.backgroundImage = 'url(' + texture + ')';
        }
      } else if (backgroundImage) {
        style.background = backgroundImage + " no-repeat center center";
        style.backgroundSize = "cover";
      }
      style = _extends({}, style, restProps.style);
      var textureMarkup = void 0;
      if ('object' === (typeof texture === 'undefined' ? 'undefined' : _typeof(texture))) {
        textureMarkup = _react2.default.createElement(
          'div',
          { className: CLASS_ROOT + "__texture" },
          texture
        );
      }
 
      var Component = tag;
      if (appCentered) {
        return _react2.default.createElement(
          'div',
          _extends({}, restProps, { ref: function ref(_ref) {
              return _this5.boxContainerRef = _ref;
            },
            className: containerClasses.join(' '),
            style: style, role: role }, a11yProps, clickableProps),
          skipLinkAnchor,
          _react2.default.createElement(
            Component,
            { id: id, className: classes.join(' ') },
            textureMarkup,
            children
          )
        );
      } else {
        return _react2.default.createElement(
          Component,
          _extends({}, restProps, { ref: function ref(_ref2) {
              return _this5.boxContainerRef = _ref2;
            },
            id: id, className: classes.join(' '), style: style,
            role: role, tabIndex: tabIndex,
            onClick: onClick }, a11yProps, clickableProps),
          skipLinkAnchor,
          textureMarkup,
          children
        );
      }
    }
  }]);
 
  return Box;
}(_react.Component);
 
Box.displayName = 'Box';
exports.default = Box;
 
 
var FIXED_SIZES = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'];
var RELATIVE_SIZES = ['full', '1/2', '1/3', '2/3', '1/4', '3/4'];
var SIZES = FIXED_SIZES.concat(RELATIVE_SIZES);
var MARGIN_SIZES = ['small', 'medium', 'large', 'none'];
var PAD_SIZES = ['small', 'medium', 'large', 'xlarge', 'none'];
 
Box.propTypes = {
  a11yTitle: _react.PropTypes.string,
  announce: _react.PropTypes.bool,
  align: _react.PropTypes.oneOf(['start', 'center', 'end', 'baseline', 'stretch']),
  alignContent: _react.PropTypes.oneOf(['start', 'center', 'end', 'between', 'around', 'stretch']),
  alignSelf: _react.PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
  appCentered: _react.PropTypes.bool,
  backgroundImage: _react.PropTypes.string,
  basis: _react.PropTypes.oneOf(SIZES),
  colorIndex: _react.PropTypes.string,
  containerClassName: _react.PropTypes.string,
  direction: _react.PropTypes.oneOf(['row', 'column']),
  focusable: _react.PropTypes.bool,
  flex: _react.PropTypes.oneOf(['grow', 'shrink', true, false]),
  full: _react.PropTypes.oneOf([true, 'horizontal', 'vertical', false]),
  // remove in 1.0?
  onClick: _react.PropTypes.func,
  justify: _react.PropTypes.oneOf(['start', 'center', 'between', 'end']),
  margin: _react.PropTypes.oneOfType([_react.PropTypes.oneOf(MARGIN_SIZES), _react.PropTypes.shape({
    bottom: _react.PropTypes.oneOf(MARGIN_SIZES),
    horizontal: _react.PropTypes.oneOf(MARGIN_SIZES),
    left: _react.PropTypes.oneOf(MARGIN_SIZES),
    right: _react.PropTypes.oneOf(MARGIN_SIZES),
    top: _react.PropTypes.oneOf(MARGIN_SIZES),
    vertical: _react.PropTypes.oneOf(MARGIN_SIZES)
  })]),
  pad: _react.PropTypes.oneOfType([_react.PropTypes.oneOf(PAD_SIZES), _react.PropTypes.shape({
    between: _react.PropTypes.oneOf(PAD_SIZES),
    horizontal: _react.PropTypes.oneOf(PAD_SIZES),
    vertical: _react.PropTypes.oneOf(PAD_SIZES)
  })]),
  primary: _react.PropTypes.bool,
  reverse: _react.PropTypes.bool,
  responsive: _react.PropTypes.bool,
  role: _react.PropTypes.string,
  separator: _react.PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'horizontal', 'vertical', 'all', 'none']),
  size: _react.PropTypes.oneOfType([_react.PropTypes.oneOf(['auto', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'full']), // remove in 1.0?, use basis
  _react.PropTypes.shape({
    height: _react.PropTypes.oneOfType([_react.PropTypes.oneOf(SIZES), _react.PropTypes.shape({
      max: _react.PropTypes.oneOf(FIXED_SIZES),
      min: _react.PropTypes.oneOf(FIXED_SIZES)
    })]),
    width: _react.PropTypes.oneOfType([_react.PropTypes.oneOf(SIZES), _react.PropTypes.shape({
      max: _react.PropTypes.oneOf(FIXED_SIZES),
      min: _react.PropTypes.oneOf(FIXED_SIZES)
    })])
  })]),
  tag: _react.PropTypes.string,
  textAlign: _react.PropTypes.oneOf(['left', 'center', 'right']),
  texture: _react.PropTypes.oneOfType([_react.PropTypes.node, _react.PropTypes.string]),
  wrap: _react.PropTypes.bool
};
 
Box.contextTypes = {
  intl: _react.PropTypes.object
};
 
Box.defaultProps = {
  announce: false,
  direction: 'column',
  pad: 'none',
  tag: 'div',
  responsive: true,
  focusable: true
};
module.exports = exports['default'];
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
 
 
1
 
 
 
1
 
6
 
1
 
1
 
1
 
1
 
1
 
1
 
3
 
1
 
1
 
1
 
1
 
1
 
1
 
1
1
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
1
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
1
 
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
var _react = require('react');
 
var _react2 = _interopRequireDefault(_react);
 
var _classnames2 = require('classnames');
 
var _classnames3 = _interopRequireDefault(_classnames2);
 
var _CSSClassnames = require('../utils/CSSClassnames');
 
var _CSSClassnames2 = _interopRequireDefault(_CSSClassnames);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
var CLASS_ROOT = _CSSClassnames2.default.BUTTON;
 
var Button = function (_Component) {
  _inherits(Button, _Component);
 
  function Button() {
    _classCallCheck(this, Button);
 
    var _this = _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).call(this));
 
    _this._onClick = _this._onClick.bind(_this);
    _this._onMouseDown = _this._onMouseDown.bind(_this);
    _this._onMouseUp = _this._onMouseDown.bind(_this);
    _this._onFocus = _this._onFocus.bind(_this);
    _this._onBlur = _this._onBlur.bind(_this);
    _this.state = {
      mouseActive: false,
      focus: false
    };
    return _this;
  }
 
  _createClass(Button, [{
    key: '_onClick',
    value: function _onClick(event) {
      var _props = this.props,
          method = _props.method,
          onClick = _props.onClick,
          path = _props.path;
      var router = this.context.router;
 
 
      event.preventDefault();
 
      if ('push' === method) {
        router.push(path);
      } else if ('replace' === method) {
        router.replace(path);
      }
 
      if (onClick) {
        onClick.apply(undefined, arguments);
      }
    }
  }, {
    key: '_onMouseDown',
    value: function _onMouseDown(event) {
      var onMouseDown = this.props.onMouseDown;
 
      this.setState({ mouseActive: true });
      if (onMouseDown) {
        onMouseDown(event);
      }
    }
  }, {
    key: '_onMouseUp',
    value: function _onMouseUp(event) {
      var onMouseUp = this.props.onMouseUp;
 
      this.setState({ mouseActive: false });
      if (onMouseUp) {
        onMouseUp(event);
      }
    }
  }, {
    key: '_onFocus',
    value: function _onFocus(event) {
      var onFocus = this.props.onFocus;
      var mouseActive = this.state.mouseActive;
 
      if (mouseActive === false) {
        this.setState({ focus: true });
      }
      if (onFocus) {
        onFocus(event);
      }
    }
  }, {
    key: '_onBlur',
    value: function _onBlur(event) {
      var onBlur = this.props.onBlur;
 
      this.setState({ focus: false });
      if (onBlur) {
        onBlur(event);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _classnames;
 
      var _props2 = this.props,
          a11yTitle = _props2.a11yTitle,
          accent = _props2.accent,
          align = _props2.align,
          children = _props2.children,
          className = _props2.className,
          fill = _props2.fill,
          href = _props2.href,
          icon = _props2.icon,
          label = _props2.label,
          onClick = _props2.onClick,
          path = _props2.path,
          plain = _props2.plain,
          primary = _props2.primary,
          reverse = _props2.reverse,
          secondary = _props2.secondary,
          type = _props2.type,
          props = _objectWithoutProperties(_props2, ['a11yTitle', 'accent', 'align', 'children', 'className', 'fill', 'href', 'icon', 'label', 'onClick', 'path', 'plain', 'primary', 'reverse', 'secondary', 'type']);
 
      delete props.method;
      var router = this.context.router;
 
 
      var buttonIcon = void 0;
      if (icon) {
        buttonIcon = _react2.default.createElement(
          'span',
          { className: CLASS_ROOT + '__icon' },
          icon
        );
      }
 
      var buttonLabel = void 0;
      if (label) {
        buttonLabel = _react2.default.createElement(
          'span',
          { className: CLASS_ROOT + '__label' },
          label
        );
      }
 
      var adjustedHref = path && router ? router.createPath(path) : href;
 
      var classes = (0, _classnames3.default)(CLASS_ROOT, (_classnames = {}, _defineProperty(_classnames, CLASS_ROOT + '--focus', this.state.focus), _defineProperty(_classnames, CLASS_ROOT + '--primary', primary), _defineProperty(_classnames, CLASS_ROOT + '--secondary', secondary), _defineProperty(_classnames, CLASS_ROOT + '--accent', accent), _defineProperty(_classnames, CLASS_ROOT + '--disabled', !onClick && !adjustedHref), _defineProperty(_classnames, CLASS_ROOT + '--fill', fill), _defineProperty(_classnames, CLASS_ROOT + '--plain', plain || _react.Children.count(children) > 0 || icon && !label), _defineProperty(_classnames, CLASS_ROOT + '--align-' + align, align), _classnames), className);
 
      var adjustedOnClick = path && router ? this._onClick : onClick;
 
      var Tag = adjustedHref ? 'a' : 'button';
      var buttonType = void 0;
      if (!adjustedHref) {
        buttonType = type;
      }
 
      var first = reverse ? buttonLabel : buttonIcon;
      var second = reverse ? buttonIcon : buttonLabel;
 
      return _react2.default.createElement(
        Tag,
        _extends({}, props, { href: adjustedHref, type: buttonType,
          className: classes, 'aria-label': a11yTitle,
          onClick: adjustedOnClick,
          disabled: !onClick && !adjustedHref,
          onMouseDown: this._onMouseDown, onMouseUp: this._onMouseUp,
          onFocus: this._onFocus, onBlur: this._onBlur }),
        first,
        second,
        children
      );
    }
  }]);
 
  return Button;
}(_react.Component);
 
Button.displayName = 'Button';
exports.default = Button;
;
 
Button.propTypes = {
  a11yTitle: _react.PropTypes.string,
  accent: _react.PropTypes.bool,
  align: _react.PropTypes.oneOf(['start', 'center', 'end']),
  fill: _react.PropTypes.bool,
  href: _react.PropTypes.string,
  icon: _react.PropTypes.element,
  label: _react.PropTypes.node,
  method: _react.PropTypes.oneOf(['push', 'replace']),
  onClick: _react.PropTypes.func,
  path: _react.PropTypes.string,
  plain: _react.PropTypes.bool,
  primary: _react.PropTypes.bool,
  reverse: _react.PropTypes.bool,
  secondary: _react.PropTypes.bool,
  type: _react.PropTypes.oneOf(['button', 'reset', 'submit'])
};
 
Button.defaultProps = {
  method: 'push',
  type: 'button'
};
 
Button.contextTypes = {
  router: _react.PropTypes.object
};
module.exports = exports['default'];
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
 
 
1
 
 
 
1
 
11
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
14
 
1
 
1
 
1
 
1
 
1
 
1
 
 
 
 
 
 
 
1
 
 
 
 
1
 
 
 
 
 
1
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
1
1
 
1
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
1
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
var _react = require('react');
 
var _react2 = _interopRequireDefault(_react);
 
var _classnames3 = require('classnames');
 
var _classnames4 = _interopRequireDefault(_classnames3);
 
var _CSSClassnames = require('../utils/CSSClassnames');
 
var _CSSClassnames2 = _interopRequireDefault(_CSSClassnames);
 
var _Props = require('../utils/Props');
 
var _Props2 = _interopRequireDefault(_Props);
 
var _Box = require('./Box');
 
var _Box2 = _interopRequireDefault(_Box);
 
var _Label = require('./Label');
 
var _Label2 = _interopRequireDefault(_Label);
 
var _Heading = require('./Heading');
 
var _Heading2 = _interopRequireDefault(_Heading);
 
var _Headline = require('./Headline');
 
var _Headline2 = _interopRequireDefault(_Headline);
 
var _Markdown = require('./Markdown');
 
var _Markdown2 = _interopRequireDefault(_Markdown);
 
var _Anchor = require('./Anchor');
 
var _Anchor2 = _interopRequireDefault(_Anchor);
 
var _Layer = require('./Layer');
 
var _Layer2 = _interopRequireDefault(_Layer);
 
var _Video = require('./Video');
 
var _Video2 = _interopRequireDefault(_Video);
 
var _CirclePlay = require('./icons/base/CirclePlay');
 
var _CirclePlay2 = _interopRequireDefault(_CirclePlay);
 
var _Responsive = require('../utils/Responsive');
 
var _Responsive2 = _interopRequireDefault(_Responsive);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
var CLASS_ROOT = _CSSClassnames2.default.CARD;
 
var LABEL_SIZES = {
  xlarge: 'medium',
  large: 'medium',
  medium: 'medium',
  small: 'medium',
  xsmall: 'small'
};
 
var HEADLINE_SIZES = {
  xlarge: 'medium',
  large: 'medium'
};
 
var HEADING_TAGS = {
  medium: 'h1',
  small: 'h2',
  xsmall: 'h3'
};
 
var PARAGRAPH_SIZES = {
  xlarge: 'xlarge',
  large: 'xlarge',
  medium: 'large',
  small: 'large',
  xsmall: 'medium'
};
 
var PARAGRAPH_MARGINS = {
  xlarge: 'large',
  large: 'large',
  medium: 'medium',
  small: 'medium',
  xsmall: 'small'
};
 
var Card = function (_Component) {
  _inherits(Card, _Component);
 
  function Card(props) {
    _classCallCheck(this, Card);
 
    var _this = _possibleConstructorReturn(this, (Card.__proto__ || Object.getPrototypeOf(Card)).call(this, props));
 
    _this._onClick = _this._onClick.bind(_this);
    _this._onResponsive = _this._onResponsive.bind(_this);
    _this.state = { activeVideo: false, small: false };
    return _this;
  }
 
  _createClass(Card, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this._responsive = _Responsive2.default.start(this._onResponsive);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this._responsive) {
        this._responsive.stop();
      }
    }
  }, {
    key: '_onResponsive',
    value: function _onResponsive(small) {
      this.setState({ small: !!small });
    }
  }, {
    key: '_onClick',
    value: function _onClick(event) {
      var video = this.props.video;
 
      if (video) {
        event.preventDefault();
        this.setState({ activeVideo: !this.state.activeVideo });
      }
    }
  }, {
    key: '_renderLabel',
    value: function _renderLabel() {
      var _props = this.props,
          label = _props.label,
          textSize = _props.textSize;
 
      var result = label;
      if (typeof label === 'string') {
        result = _react2.default.createElement(
          _Label2.default,
          { size: LABEL_SIZES[textSize], margin: 'none', uppercase: true },
          label
        );
      }
      return result;
    }
  }, {
    key: '_renderHeading',
    value: function _renderHeading() {
      var _props2 = this.props,
          heading = _props2.heading,
          headingStrong = _props2.headingStrong,
          textSize = _props2.textSize;
 
      var result = heading;
      if (typeof heading === 'string') {
        if (HEADLINE_SIZES[textSize]) {
          result = _react2.default.createElement(
            _Headline2.default,
            { size: HEADLINE_SIZES[textSize], strong: headingStrong },
            heading
          );
        } else {
          result = _react2.default.createElement(
            _Heading2.default,
            { tag: HEADING_TAGS[textSize], strong: headingStrong },
            heading
          );
        }
      }
      return result;
    }
  }, {
    key: '_renderLink',
    value: function _renderLink() {
      var link = this.props.link;
 
      return link;
    }
  }, {
    key: '_renderThumbnail',
    value: function _renderThumbnail() {
      var _props3 = this.props,
          direction = _props3.direction,
          thumbnail = _props3.thumbnail,
          video = _props3.video;
      var small = this.state.small;
 
      var result = thumbnail;
      if (typeof thumbnail === 'string') {
        var size = small ? 'large' : 'xlarge';
        var videoIcon = video ? _react2.default.createElement(_Anchor2.default, { icon: _react2.default.createElement(_CirclePlay2.default, { responsive: false,
            colorIndex: 'brand', size: size }) }) : undefined;
 
        var flex = 'row' === direction ? 'grow' : undefined;
 
        result = _react2.default.createElement(
          _Box2.default,
          { className: CLASS_ROOT + '__thumbnail', flex: flex,
            backgroundImage: 'url(' + thumbnail + ')', basis: 'small',
            justify: 'center', align: 'center' },
          videoIcon
        );
      }
      return result;
    }
  }, {
    key: '_renderVideoLayer',
    value: function _renderVideoLayer() {
      var video = this.props.video;
      var activeVideo = this.state.activeVideo;
 
      var result = void 0;
 
      if (video && activeVideo) {
        var layerContent = void 0;
        if (video.source) {
          layerContent = _react2.default.createElement(
            _Video2.default,
            null,
            _react2.default.createElement('source', { src: video.source, type: 'video/' + video.type })
          );
        } else {
          layerContent = video;
        }
 
        result = _react2.default.createElement(
          _Layer2.default,
          { onClose: this._onClick, closer: true, flush: true },
          layerContent
        );
      }
 
      return result;
    }
  }, {
    key: '_renderDescription',
    value: function _renderDescription() {
      var _props4 = this.props,
          description = _props4.description,
          textSize = _props4.textSize;
 
      var result = description;
      if (typeof description === 'string') {
        var components = {
          p: { props: {
              margin: PARAGRAPH_MARGINS[textSize],
              size: PARAGRAPH_SIZES[textSize]
            } }
        };
        result = _react2.default.createElement(_Markdown2.default, { components: components, content: description });
      }
      return result;
    }
  }, {
    key: 'render',
    value: function render() {
      var _classnames2;
 
      var _props5 = this.props,
          a11yTitle = _props5.a11yTitle,
          children = _props5.children,
          className = _props5.className,
          contentPad = _props5.contentPad,
          onClick = _props5.onClick,
          reverse = _props5.reverse,
          truncate = _props5.truncate;
 
      var boxProps = _Props2.default.pick(this.props, Object.keys(_Box2.default.propTypes));
      var restProps = _Props2.default.omit(this.props, Object.keys(Card.propTypes));
 
      var classes = (0, _classnames4.default)(CLASS_ROOT, _defineProperty({}, CLASS_ROOT + '--selectable', onClick), className);
 
      var thumbnail = this._renderThumbnail();
      var label = this._renderLabel();
      var heading = this._renderHeading();
      var description = this._renderDescription();
      var link = this._renderLink();
      var videoLayer = this._renderVideoLayer();
 
      var contentClasses = (0, _classnames4.default)((_classnames2 = {}, _defineProperty(_classnames2, CLASS_ROOT + '__content', true), _defineProperty(_classnames2, CLASS_ROOT + '__content--truncate', truncate), _classnames2));
 
      var basis = 'row' === this.props.direction ? '2/3' : undefined;
      var text = _react2.default.createElement(
        _Box2.default,
        { className: contentClasses, pad: contentPad,
          basis: basis },
        label,
        heading,
        description,
        children,
        link
      );
 
      var cardJustify = void 0;
      if (reverse) {
        // align thumbnail to bottom/right of card for bottom cardPlacement
        cardJustify = 'between';
      }
 
      if (!this.props.size) {
        if (this.props.direction === 'row') {
          boxProps.size = { width: 'xlarge' };
        } else {
          boxProps.size = { width: 'medium' };
        }
      }
 
      return _react2.default.createElement(
        _Box2.default,
        _extends({}, boxProps, restProps, { className: classes, wrap: true,
          justify: cardJustify, onClick: onClick, a11yTitle: a11yTitle }),
        thumbnail,
        text,
        videoLayer
      );
    }
  }]);
 
  return Card;
}(_react.Component);
 
Card.displayName = 'Card';
exports.default = Card;
;
 
Card.propTypes = _extends({
  contentPad: _Box2.default.propTypes.pad,
  description: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
  heading: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
  headingStrong: _react.PropTypes.bool,
  label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
  link: _react.PropTypes.element,
  textSize: _react.PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
  thumbnail: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
  truncate: _react.PropTypes.bool,
  video: _react.PropTypes.oneOfType([_react.PropTypes.shape({
    source: _react.PropTypes.string.isRequired,
    type: _react.PropTypes.string
  }), _react.PropTypes.element])
}, _Box2.default.propTypes);
 
Card.defaultProps = {
  a11yTitle: 'Card',
  contentPad: 'medium',
  headingStrong: true,
  textSize: 'small'
};
module.exports = exports['default'];
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
 
 
1
 
 
 
1
 
18
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
11
 
1
 
1
 
1
 
1
 
1
 
1
 
1
1
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
1
1
 
 
1
 
 
 
1
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
1
 
'use strict';
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
var _react = require('react');
 
var _react2 = _interopRequireDefault(_react);
 
var _classnames3 = require('classnames');
 
var _classnames4 = _interopRequireDefault(_classnames3);
 
var _Box = require('./Box');
 
var _Box2 = _interopRequireDefault(_Box);
 
var _Tiles = require('./Tiles');
 
var _Tiles2 = _interopRequireDefault(_Tiles);
 
var _Tile = require('./Tile');
 
var _Tile2 = _interopRequireDefault(_Tile);
 
var _Button = require('./Button');
 
var _Button2 = _interopRequireDefault(_Button);
 
var _Previous = require('./icons/base/Previous');
 
var _Previous2 = _interopRequireDefault(_Previous);
 
var _Next = require('./icons/base/Next');
 
var _Next2 = _interopRequireDefault(_Next);
 
var _DOM = require('../utils/DOM');
 
var _CSSClassnames = require('../utils/CSSClassnames');
 
var _CSSClassnames2 = _interopRequireDefault(_CSSClassnames);
 
var _Intl = require('../utils/Intl');
 
var _Intl2 = _interopRequireDefault(_Intl);
 
var _Announcer = require('../utils/Announcer');
 
var _Props = require('../utils/Props');
 
var _Props2 = _interopRequireDefault(_Props);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
 
var CLASS_ROOT = _CSSClassnames2.default.CAROUSEL;
 
var Carousel = function (_Component) {
  _inherits(Carousel, _Component);
 
  function Carousel(props, context) {
    _classCallCheck(this, Carousel);
 
    var _this = _possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call(this, props, context));
 
    _this._onSelect = _this._onSelect.bind(_this);
    _this._stopAutoplay = _this._stopAutoplay.bind(_this);
    _this._startAutoplay = _this._startAutoplay.bind(_this);
    _this._onResize = _this._onResize.bind(_this);
    _this._slidePrev = _this._slidePrev.bind(_this);
    _this._slideNext = _this._slideNext.bind(_this);
    _this._handleScroll = _this._handleScroll.bind(_this);
    _this._announce = _this._announce.bind(_this);
 
    _this.state = {
      activeIndex: props.activeIndex || 0,
      hideControls: !props.persistentNav,
      priorIndex: 0,
      sequence: 1,
      width: 0,
      slide: false
    };
    return _this;
  }
 
  _createClass(Carousel, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;
 
      if (this.carouselRef) {
        this.setState({
          width: this.carouselRef.offsetWidth
        });
 
        window.addEventListener('resize', this._onResize);
 
        var _Hammer = require('hammerjs');
        this.hammer = new _Hammer(this.carouselRef);
        this._updateHammer();
 
        this._handleScroll();
        var scrollParents = (0, _DOM.findScrollParents)(this.carouselRef);
        scrollParents.forEach(function (scrollParent) {
          scrollParent.addEventListener('scroll', _this2._handleScroll);
        }, this);
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if ((nextProps.activeIndex || 0 === nextProps.activeIndex) && this.state.activeIndex !== nextProps.activeIndex) {
        this.setState({ activeIndex: nextProps.activeIndex }, this._announce);
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this._updateHammer();
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      var _this3 = this;
 
      clearInterval(this._slideAnimation);
 
      window.removeEventListener('resize', this._onResize);
 
      var scrollParents = (0, _DOM.findScrollParents)(this.carouselRef);
      scrollParents.forEach(function (scrollParent) {
        scrollParent.removeEventListener('scroll', _this3._handleScroll);
      }, this);
 
      this._unmountHammer();
    }
  }, {
    key: '_unmountHammer',
    value: function _unmountHammer() {
      if (this.hammer) {
        this.hammer.stop();
        this.hammer.destroy();
      }
      this.hammer = undefined;
    }
  }, {
    key: '_updateHammer',
    value: function _updateHammer() {
      var _this4 = this;
 
      if (this.hammer) {
        this.hammer.get('swipe').set({
          direction: Hammer.DIRECTION_HORIZONTAL
        });
 
        this.hammer.off('panend');
        this.hammer.on('panend', function (event) {
          if (event.direction === 4) {
            _this4._slidePrev();
          } else if (event.direction === 2) {
            _this4._slideNext();
          }
        });
      }
    }
  }, {
    key: '_handleScroll',
    value: function _handleScroll() {
      var autoplay = this.props.autoplay;
      var slide = this.state.slide;
 
      var viewportHeight = document.documentElement.clientHeight;
      var carouselTopPosition = this.carouselRef.getBoundingClientRect().top;
      var carouselHeight = this.carouselRef.offsetHeight;
      var startScroll = viewportHeight - carouselHeight / 2;
 
      if (autoplay && carouselTopPosition <= startScroll && carouselTopPosition >= -carouselHeight / 2) {
        if (slide === false) {
          this._setSlideInterval();
          this.setState({
            slide: true
          });
        }
      } else {
        clearInterval(this._slideAnimation);
        this.setState({
          slide: false
        });
      }
    }
  }, {
    key: '_announce',
    value: function _announce() {
      var intl = this.context.intl;
 
      var slideNumber = _Intl2.default.getMessage(intl, 'Slide Number', {
        slideNumber: this.state.activeIndex + 1
      });
      var activatedMessage = _Intl2.default.getMessage(intl, 'Activated');
      (0, _Announcer.announce)(slideNumber + ' ' + activatedMessage, 'polite');
    }
  }, {
    key: '_setSlideInterval',
    value: function _setSlideInterval() {
      var autoplaySpeed = this.props.autoplaySpeed;
 
      clearInterval(this._slideAnimation);
      this._slideAnimation = setInterval(function () {
        var _props = this.props,
            children = _props.children,
            infinite = _props.infinite;
        var activeIndex = this.state.activeIndex;
 
 
        var numSlides = children.length;
        var index = (activeIndex + 1) % numSlides;
 
        if (!this.props.hasOwnProperty('activeIndex')) {
          this.setState({
            activeIndex: index
          }, this._announce);
        }
        if (!infinite && activeIndex === numSlides - 1) {
          clearInterval(this._slideAnimation);
        }
 
        if (this.props.onActive) {
          this.props.onActive(index);
        }
      }.bind(this), autoplaySpeed);
    }
  }, {
    key: '_onSelect',
    value: function _onSelect(index) {
      if (!this.props.hasOwnProperty('activeIndex') && index !== this.state.activeIndex) {
        this.setState({
          activeIndex: index
        }, this._announce);
      }
 
      if (this.props.onActive) {
        this.props.onActive(index);
      }
    }
  }, {
    key: '_stopAutoplay',
    value: function _stopAutoplay() {
      var _props2 = this.props,
          autoplay = _props2.autoplay,
          persistentNav = _props2.persistentNav;
 
      if (autoplay) {
        clearInterval(this._slideAnimation);
      }
 
      if (!persistentNav) {
        this.setState({
          hideControls: false
        });
      }
    }
  }, {
    key: '_startAutoplay',
    value: function _startAutoplay() {
      var activeIndex = this.state.activeIndex;
      var _props3 = this.props,
          autoplay = _props3.autoplay,
          children = _props3.children,
          infinite = _props3.infinite,
          persistentNav = _props3.persistentNav;
 
      if (autoplay && (infinite || activeIndex !== children.length - 1) &&
      // making sure to only start autoplay if the focus is not inside
      // the carousel
      !this.carouselRef.contains(document.activeElement)) {
        this._setSlideInterval();
      }
 
      if (!persistentNav) {
        this.setState({
          hideControls: true
        });
      }
    }
  }, {
    key: '_onResize',
    value: function _onResize() {
      this.setState({
        width: this.carouselRef.offsetWidth
      });
    }
  }, {
    key: '_slidePrev',
    value: function _slidePrev() {
      var children = this.props.children;
      var activeIndex = this.state.activeIndex;
 
      var numSlides = children.length;
      var index = (activeIndex + numSlides - 1) % numSlides;
 
      if (!this.props.hasOwnProperty('activeIndex')) {
        this.setState({
          activeIndex: index
        }, this._announce);
      }
 
      if (this.props.onActive) {
        this.props.onActive(index);
      }
    }
  }, {
    key: '_slideNext',
    value: function _slideNext() {
      var children = this.props.children;
      var activeIndex = this.state.activeIndex;
 
      var numSlides = children.length;
      var index = (activeIndex + 1) % numSlides;
 
      if (!this.props.hasOwnProperty('activeIndex')) {
        this.setState({
          activeIndex: index
        }, this._announce);
      }
 
      if (this.props.onActive) {
        this.props.onActive(index);
      }
    }
  }, {
    key: '_renderPrevButton',
    value: function _renderPrevButton() {
      var infinite = this.props.infinite;
      var activeIndex = this.state.activeIndex;
      var intl = this.context.intl;
 
      var prevButton = void 0;
      if (infinite || activeIndex !== 0) {
        var prevMessage = _Intl2.default.getMessage(intl, 'Previous Slide');
        prevButton = _react2.default.createElement(_Button2.default, { icon: _react2.default.createElement(_Previous2.default, { size: 'large' }),
          a11yTitle: prevMessage,
          className: CLASS_ROOT + '__arrow ' + CLASS_ROOT + '__arrow--prev',
          onClick: this._slidePrev });
      }
 
      return prevButton;
    }
  }, {
    key: '_renderNextButton',
    value: function _renderNextButton() {
      var _props4 = this.props,
          children = _props4.children,
          infinite = _props4.infinite;
      var activeIndex = this.state.activeIndex;
      var intl = this.context.intl;
 
      var nextButton = void 0;
      if (infinite || activeIndex !== children.length - 1) {
        var nextMessage = _Intl2.default.getMessage(intl, 'Next Slide');
        nextButton = _react2.default.createElement(_Button2.default, { icon: _react2.default.createElement(_Next2.default, { size: 'large' }),
          a11yTitle: nextMessage,
          className: CLASS_ROOT + '__arrow ' + CLASS_ROOT + '__arrow--next',
          onClick: this._slideNext });
      }
 
      return nextButton;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this5 = this;
 
      var _props5 = this.props,
          a11yTitle = _props5.a11yTitle,
          children = _props5.children,
          className = _props5.className,
          props = _objectWithoutProperties(_props5, ['a11yTitle', 'children', 'className']);
 
      delete props.activeIndex;
      delete props.onActive;
      var restProps = _Props2.default.omit(_extends({}, props), Object.keys(Carousel.propTypes));
      var _state = this.state,
          activeIndex = _state.activeIndex,
          hideControls = _state.hideControls,
          width = _state.width;
      var intl = this.context.intl;
 
      var classes = (0, _classnames4.default)(CLASS_ROOT, _defineProperty({}, CLASS_ROOT + '--hide-controls', hideControls), className);
 
      var trackWidth = width * children.length;
      var trackOffset = width * activeIndex;
 
      var tiles = _react2.default.Children.map(children, function (child, index) {
        var ariaHidden = activeIndex !== index ? true : false;
        return _react2.default.createElement(
          _Tile2.default,
          { className: CLASS_ROOT + '__item', 'aria-hidden': ariaHidden },
          child
        );
      });
 
      var controls = _react2.default.Children.map(children, function (child, index) {
        var active = index === activeIndex;
        var controlClasses = (0, _classnames4.default)(CLASS_ROOT + '__control', _defineProperty({}, CLASS_ROOT + '__control--active', active));
        var activateMessage = _Intl2.default.getMessage(intl, 'Activate');
        var slideNumberMessage = _Intl2.default.getMessage(intl, 'Slide Number', {
          slideNumber: index + 1
        });
 
        var currentlyActiveMessage = '';
        if (active) {
          currentlyActiveMessage = '(' + _Intl2.default.getMessage(intl, 'Currently Active') + ')';
        }
        return _react2.default.createElement(
          _Button2.default,
          { plain: true, onClick: _this5._onSelect.bind(_this5, index),
            a11yTitle: activateMessage + ' ' + slideNumberMessage + ' ' + currentlyActiveMessage },
          _react2.default.createElement(
            'svg',
            { className: controlClasses, viewBox: '0 0 24 24', version: '1.1' },
            _react2.default.createElement('circle', { cx: 12, cy: 12, r: 6 })
          )
        );
      }, this);
 
      var carouselMessage = a11yTitle || _Intl2.default.getMessage(intl, 'Carousel');
      return _react2.default.createElement(
        'div',
        _extends({ ref: function ref(_ref) {
            return _this5.carouselRef = _ref;
          } }, restProps, {
          className: classes, role: 'group', 'aria-label': carouselMessage,
          onFocus: this._stopAutoplay, onBlur: this._startAutoplay,
          onMouseOver: this._stopAutoplay, onMouseOut: this._startAutoplay }),
        _react2.default.createElement(
          'div',
          { className: CLASS_ROOT + '__track',
            style: {
              width: trackWidth && trackWidth > 0 ? trackWidth : '',
              marginLeft: -trackOffset,
              marginRight: -(trackWidth - trackOffset - width)
            } },
          _react2.default.createElement(
            _Tiles2.default,
            { fill: true, responsive: false, wrap: false, direction: 'row' },
            tiles
          )
        ),
        this._renderPrevButton(),
        this._renderNextButton(),
        _react2.default.createElement(
          _Box2.default,
          { className: CLASS_ROOT + "__controls", direction: 'row',
            justify: 'center', responsive: false },
          controls
        )
      );
    }
  }]);
 
  return Carousel;
}(_react.Component);
 
Carousel.displayName = 'Carousel';
exports.default = Carousel;
 
 
Carousel.contextTypes = {
  intl: _react.PropTypes.object
};
 
Carousel.defaultProps = {
  autoplay: true,
  autoplaySpeed: 5000,
  infinite: true,
  persistentNav: true
};
 
Carousel.propTypes = {
  a11yTitle: _react.PropTypes.string,
  activeIndex: _react.PropTypes.number,
  autoplay: _react.PropTypes.bool,
  autoplaySpeed: _react.PropTypes.number,
  infinite: _react.PropTypes.bool,
  onActive: _react.PropTypes.func,
  persistentNav: _react.PropTypes.bool
};
module.exports = exports['default'];